I have a horizontal scrolling website with a fixed sidebar and footer. I am trying to get my content to 100% height to sit on the footer. Although my sidebar is at 100% height even though there is hardly any content in it I cannot get my contents divs to go to 100% and sit on the footer. Here is my HTML structure:
<html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="wrapper">
<div class="sidebar">
<div class="hlogo">Lorem Ipsum</div>
<div class="navigation demi f11">
<ul>
<li>ABOUT US</li>
<li>WHAT WE DO</li>
<li>OUR THEORY</li>
<li>PORTFOLIO</li>
<li>CLIENTS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<section class="habout step">
<div class="content" id="content1">
</div>
</section>
</div>
<div class="footer fcolor">
</div>
</body>
</html>
And my CSS:
html {
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
height:100%;
}
body {
margin:0;
height: 100%;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
width: 12660px;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -45px;
}
.content{
float:left;
width:1000px;
margin: 0px;
height: 100%;
padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
float:left;
width:350px;
position: fixed;
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
background-size:cover;
height: 100%;
z-index: 1;
}
.step {
float: left;
margin: 0px;
position:relative;
height: 100%;
min-width: 1000px;
padding: 0px;
overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}
Even if I apply the CSS of the sidebar class which is 100% height the section and content divs wont stretch to 100% height.
Any suggestions are welcome.
Thanks
The problem was in class .wrap{ height: auto !important;} . Once I removed the height auto the content div expanded to 100% .
Thanks
Related
I'm trying to put overlay on top of showcase image and putting back texts on image on top of overlay using z-index, but z-index: 1 is not working. Position absolute is added and then z-index:1 to create overlay effect but nothing is happening. Can someone check, what's going on here?
I have set position absolute and given its top ,left position for overlay
<!DOCTYPE html>
<html>
<head>
<title>My website2</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h2 > <span class="coral">Acme</span> Web Design</h2>
<nav>
<ul class="my-list">
<li >
<a class="coral" href="#"> HOME</a>
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h2>Lorem ipsum dolor sit amet consectetur
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
</p>
</div>
</section>
</body>
</html>
.container{
width:80%;
margin: auto;
overflow: hidden;
}
header{
background-color: #35424a;
color: #fff;
min-height: 45px;
padding-top: 20px;
border-bottom: 3px solid coral;
}
header ul{
margin:0;
padding:0;
}
header li{
display: inline;
list-style: none;
padding:0 15px 0 15px ;
}
header h2{
float: left;
}
header nav{
float:right;
}
header h2{
margin: 0;
}
.coral{
color:coral;
}
#showcase{
background-image: url("images/showcase2.jpg");
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
}
#showcase::after {
content: "";
position: absolute;
top:68px;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.6);
}
#showcase {
z-index:1;
}
It got solved now. Z-index need to be added on container class which contains h2 and p tags.
#showcase{
position: relative;
background-image:url("images/showcase.jpg") ;
background-size:cover;
background-repeat: no-repeat;
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
#showcase::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.8);
}
.container{
z-index: 10;
}
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I have a problem with 2 pictures staying one aboce the other. I am trying to make the plane stay above the cloud. But, even if I have set the position and z-index, they stil stay one near the other.
How can I make the plane stay above the cloud?
Thank you!
HTML:
<html>
<body>
<div id="main">
<div id="header">
<img id="logo" src="images/logo.png" />
<ul>
<li>Home</li>
<li>Oferte Turism</li>
<li>Despre noi</li>
<li>Contact</li>
</ul>
</div>
<div id="body">
<div id="leftup">
<img id="cloud" src="images/cloud.png" />
<img id="plane" src="images/plane.png" />
</div>
<div id="form"></div>
<div id="offers"></div>
</div>
<div id="body2"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
body {margin:0;
padding:0;
}
#body {height: 900px;
background-image: url('images/headerbg.png');
}
#main {width: 960px;
margin: 0px auto;
}
#header {height: 80px;
background-image: url('images/hd.png');
background-repeat: no-repeat;
}
ul { list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
li { display: inline;
padding:20px;
float:left;
margin-left: 35px;
}
li a { text-decoration:none;
color:white;
font-style:bold; <!-- NO BOLD -->
}
li a:hover { text-decoration:underline;
}
#logo {margin-left: 30px;
float:left;
}
#leftup {clear:both;
float:left;
margin-top:50px;
}
#cloud {width:250px;
position:relative;
z-index:1;
}
#plane {width:250px;
position:relative;
z-index:10;
}
#form {float:right;
border: solid 1px blue;
height:200px;
width: 100px;
margin-right:30px;
}
#offers {border: solid 1px yellow;
clear:both;
margin: 100px auto;
height: 300px;
width: 500px;}![enter image description here][2]
#body2 { height:600px;
background-image: url('images/bodybg.png');
}
#footer {height: 100px;
background-image: url('images/footerbg.png');
}
I am trying to make bootstrap drop down menu full screen width and fluid, but it seems i can not do it :) I am trying to put the search field into drop down menu (search filed & search button have to be in the center of the submenu field).
HTML:
<ul class="nav pull-right">
<li class="dropdown">
Search</b>
<ul class="dropdown-menu" id="menu1">
<div class="search_field">
<form class="navbar-form pull-right">
<input type="text" class="span4" placeholder="Search">
<button type="submit" class="btn btn-search">Search</button>
</form>
</div>
</ul>
</li>
</ul>
CSS:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 0px !important;
border-radius: 0px !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
float: left;
list-style: none outside none;
margin: 0px;
min-width: 100%;
padding: 10px 100%;
margin: 0, -100%;
position: absolute;
top: 100%;
z-index: 1000;
}
}
.btn-search {
background-color: orange !important;
background-image: linear-gradient(to bottom, orange, #orange light) !important;
background-repeat: repeat-x !important;
padding: 10px 20px !important;
}