I know the common solution to this problem is the faux layout, but that doesn't work for me because I have a section with a shadow that needs to extend over the sidebar. Are there any new work arounds for this issue? I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.
I've included the entire HTML / CSS.
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin:0;
padding: 0;
}
body {
background: #ccc;
}
#content {
width: 900px;
margin: 50px auto;
background: #fff;
}
#main {
overflow: hidden;
}
#sidebar {
width: 180px;
float: left;
}
#sidebar li {
padding: 10px;
border-bottom: 1px #ccc solid;
}
#main-content {
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
float: left;
width: 700px;
padding: 10px
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<div id="sidebar">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="main-content">I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.</div>
</div>
</div>
</body>
</html>
You can use Jquery for this:
$("#main-content").height($("#sidebar").height() - 20);
-20 is the padding you applied.
Here is a working demo: http://jsfiddle.net/rniestroj/DEVha/
you can set up a div wrapper with a background image. inside of this wrapper, you place the two floating divs under the two floating divs - but still inside of the wrapper - you kill the float with the following line:
<div style="clear: both; height: 0; overflow: hidden;"> </div>
Related
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.
I'm having two issues at once. One, with my new layout, it seems that when I zoom in enough, the x-scroll bar doesn't appear anymore (it used to before I went to the flex layout.) If I add "overflow: auto;" to the body style, then it will show up, but only if you scroll down to the very bottom, and that's not what I want.
Also, I tried a style where I could have the hover color go over the image instead of replacing it. (I used the after element.) It was working until I went to the flex layout.
(Also, is there a way to add scrolls to the other flex-item divs? I don't know what conditions will force the "overflow: auto;" to come into effect.)
[code]
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
background-color: beige;
//overflow: auto;
}
ul
{
height: auto;
width: 180px;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 12px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
background-size: 100% 100%;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:97%;
width: 92%;
height:88%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
// top:0;
top: 2.5;
right: 0.0;
left: 2.0;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
}
#container
{
overflow: auto;
}
</style>
<div style="width: 1000px; height: auto; margin: 0 auto;" id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; width: 1000px; border: 1px solid blue; height: auto; background-color: tan;" class="flex-container">
<div class="flex-item w3-card-4">
<ul style="width: auto;">
<li> Home</li><br/>
<li> About Us</li><br/>
<li> Pastoral Staff </li><br/>
<li> Sunday School </li><br/>
<li> Services & Directions</li><br/>
<li> Calendar </li><br/>
<li> Activities </li><br/>
<li> Contact Us </li><br/>
<li> Sermons </li><br/>
<li> Weekly Bulletin </li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
Dear Friends, <br><br/>
<p>Thank you for taking the time to visit our website for First Baptist Church of LaSalle. We invite you to take the time to look at the site and get to know a little bit about us. </p>
<p>First Baptist Church was started in 1839 and has been preaching the Word of God without compromise ever since. The church moved to its current location in 1976. </p>
<p>As pastor of the church, I have had the privilege of working with many wonderful people here at the church. God has blessed us with a great staff and many wonderful people in the congregation.</p>
<p>It is exciting to be here and to see what God is doing now and is going to do in the future. First Baptist Church is a church that cares about people and a place you can make home.</p>
<p>I would encourage you to come and see for yourself what God is doing here. My family and our church would love to see you.</p>
In Christ, <br></br>
Wesley Waddle, Pastor
</div>
<div class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br></br>
<B> PHONE: </B> 815.223.1333 <br></br>
<B> FAX: </B> 815.223.1334 <br></br>
<br></br>
<B>ADDRESS: </B> 200 - 24th Street <br></br>
P. O. Box 1043 <br></br>
LaSalle, IL 61301 <br></br>
<br></br>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item">Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
[/code]
For the hover problem, it's not lining up to fully fit the image. It's a big too tall on the sides at the top. (Originally, "Top: 0; Left: 1.8; Right: 0; Bottom: 0; height: 100%; width: 97%;" worked, but now it doesn't with the new layout.) (So I know there should be a way to do it with just one style for all the li elements instead of having to having varying styles for each li element.)
Also, now that I recall, after I added the flex item to contain the UL and added the flex item to the flex container, I had to change my background-size: 100%; to background-size: 100% 100%;
to get it to fit all the words on the image and not go outside the image.
As for the scrolls, for some reason, the only ones I can get to show up, other than using overflow: scroll; is overflow: auto; for body, and that only shows the x-scroll if you scroll to the very bottom. (Interestingly, the y-scroll seems to be working fine.) Applying overflow: auto; to #container doesn't appear to work.
it has been some time since I made my last webpage and it seems that I have forgot much. I cant resolve why the last item from the #menu ul goes to the next line while the #menu div is wide enough to contain all the list elements plus the logo div, it has margin and padding set to 0.
I used to do menus in such way before but have probably forgot something.
I searched for the solution however I cant make the things working right.
The question is..why arent the li items in one line? Whats causing the 850 px overlap when they all together should be 802px wide?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
background: url("./gfx/logo-small.png");
z-index: 5;
display: block;
width: 150px;
height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
z-index: 5;
position: relative;
float:left;
display: inline;
height: 31px;
overflow: hidden;
text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
height: 31px;
margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
height: 31px;
cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
background: url("./gfx/menu-a.png");
background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
background-position: 0 0;
width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
background-position: -692px 0px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
Contact Us<br />
FAQ <br />
</p>
</div>
<div id = "footer-links-2">
<p>
Terms of use<br />
Insurance<br />
Our Team<br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for your advices.
Allright, basic mistake: when positioning two elements using float property just beside each other one must have float:left (#logo) and the other muset go to right simple adding float:right to #menu did the thing (also removed the 150px padding-right).
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 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