I have a div that contains an image with a width of 100%, I want to put all of my other content (everything that will go in the content div) beneath it. Here is my current code:
98.214.131.200/index.php
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Forum</li>
<li>Join</li>
<li>Members</li>
<li>Events</li>
<li>Training</li>
<li>Facebook</li>
<ab>Peoria Triathlon Club</ab>
</ul>
<ul id="quote">
<p>"random quote"</p>
</ul>
<div id="bg"><img src="bg.jpg" width="100%" alt=""</img></div>
<div id="content">
<p>content</p>
</div>
</body>
</html>
98.214.131.200/style.css
body {
background-color: #000000;
color: #C1C1C1;
font-family: Arial,Verdana,Helvetica,sans-serif;
margin: 0;
}
#bg {
position:absolute;
top:0;
left:0;
width:100%;
}
#content {
position:relative;
color: #FFF;
}
#nav {
z-index:1;
position:relative;
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #c00;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
#nav ab {
float: right; }
#nav ab a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #c00;
border-right: 1px solid #ccc; }
#nav ab a:hover {
color: #c00;
background-color: #fff; }
#quote{
z-index:1;
position:relative;
}
#quote p {
color: #000;
width: 350px;
}
You can visit http:// 98.214.131.200 to see my current code.
Take the <p> out of the <ul>, and place it (along with the #content <p>) inside of #bg. Then revisit your positioning declarations...
Absolute positioned elements depend on a parent container with Relative positioning. Thus, #bg should be position:relative while #quote position:absolute. By using #bg as the parent for both the quote and the content - you keep everything relative to that one element you're trying to focus on.
Built a fiddle (using your IP address for the images).
http://jsfiddle.net/bqXc6/
Here's the gist tho:
#bg { position:relative; width:100%; }
#quote {
position:absolute;
color: #000;
top: 20px;
width: 350px;
margin-left:20px;
}
#content { color:#FFF; margin-left:20px; }
Please note: In the fiddle, I cleaned up your code for your 'float:left' nav elements using overflow hidden on their parent (just to push open the height/width) so it's background-color was visible.
To put background image, use following css property
background-image:url('yourimage.jpg');
You should embed your #nav and #quote elements into a div or header tag and position it absolutely. Then you can position you image container relatively, which will push down subsequent content.
HTML:
<div id="header">
<ul id="nav"></ul>
<ul id="quote></ul>
</div>
CSS:
div#header{
position: absolute;
}
#bg{
position: relative;
}
You can use the display: block css property to make it it display on its own line. Just add that property to #bg in your css stylesheet.
Related
First time asking a question. I've looked this up exhaustively and I thiiiink I get what my problem is but I don't know how to fix it. I've tried multiple different things to no avail. I am trying to learn html and css and this is my first time hand-writing a site by myself, though I am doing it inside Dreamweaver.
I cannot get either the location nor the social media font awesome icons to become links. The urls are just generic at the moment and I added a border to the left and right floats so I could check they were in the right spot.
I think that what is happening is that the padding for my contentbox or my container are overlapping the footer, but I have changed the z-index and tried removing the padding all together and they still don't seem to work (and then the page doesn't look the way I wanted it) I have been searching for answers to this but, at this point, I think it might be something I specifically messed up or don't understand that is making this happen, so I wanted to reach out to all of you.
Here is my html (I hope this works!):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!---outer containers-->
<div id="container">
<div id="header">
<div id="logo">
</div>
<nav>
<ul>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="contentbox">
<div id="content">
<div id="frontcontent">
<p>
<img id="sanjapic" src="Images/SanjaPicture.jpg"/>
<h1>Edgy Hair Stylist Serving the Denver Area</h1>
</p>
</div>
</div>
<footer>
<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>
<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>
</footer>
</div>
</div>
</body>
</html>
and here is my css:
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
background-image: url(Images/bgLarge.jpg);
background-repeat: no-repeat;
background-size: 100%;
padding: 0;
font-family:'Fjalla One', sans-serif;
font-style: normal;
font-weight: 400;
background-attachment: fixed;
margin:0px;
background-color: #2F2F2F;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
#header {
width: 100%;
height: 100px;
background-image: url(Images/toptent.png);
background-repeat: no-repeat;
position: relative;
background-size: contain;
z-index:50;
}
#logo {
background-image: url(Images/SanjaLogoGray.png);
height: 70px;
background-repeat: no-repeat;
z-index: 100;
width: 100%;
margin: 0 auto;
position:relative;
max-width: 250px;
display:block;
}
#contentbox {
width: 80%;
height:100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
max-width: 800px;
margin-top: -110px;
padding-top: 100px;
display: block;
z-index: -2000;
-webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
box-shadow: 0px 5px 15px 10px #2F2F2F;
}
#content {
margin-top: 30px;
padding:2%;
display: block;
}
#about {
position:relative;
margin:0;
left:-70px;
top:-8px;
}
#sanjapic {
height:auto;
width: 80%;
max-width:400px;
margin: 0 auto;
position:relative;
display:block;
padding-top:10px;
}
h1 {
font-size:1.2em;
text-align:center;
margin:0 auto;
}
#frontcontent h1 {
max-width:60%;
height: auto;
width:80%;
}
nav {
width: 80%;
background: #ffffff;
border-right: none;
margin: 0 auto;
max-width:800px;
margin-bottom:10px;
margin-top:10px;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 25%; /* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
margin-bottom:20px;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000000;
padding:10px;
}
nav ul li a:hover {
display: block;
text-decoration: none;
color: #312847;
border: 2px solid #000000;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #617574;
box-shadow: 2px 2px 5px #617574;
}
nav ul li a:active {
background-color:#7DB4B9
}
footer {
background-color:#333333;
height:80px;
width:100%;
margin:0 auto;
z-index:3000;
position:relative;
height:100%;
}
footer a{
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
text-decoration:none;
}
#social {
float:right;
padding:20px;
}
#left {
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
font-size:.7em;
}
Your issue is this following statement on #contentbox:
z-index: -2000;
That's definitely something you DON'T want to do. Your bare minimum z-index for visible items should always be 0, and you should work your way up from that.
Also avoid using too big numbers as it's harder to keep tabs.
Update: here's the working version of your code http://jsbin.com/zatogisepo/edit?html,css,output
I have an ul/li where each li contains 2 div. One of the div ("category") can content text that can wrap on multiple lines. I'm trying to get the other div ("abbr") of that li to have the same height. Since the parent li is stretching, I tried height: 100% on the abbr but it doesn't stretch it to.
Any idea?
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr">ABC</div>
<div class="category">Very long or very shortshort</div>
</li>
</ul>
And the css I used:
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Here's a fiddle if you wanna play with it: http://jsfiddle.net/P6UzU/
You can use CSS tables as Danield say above, or you can simulate the effect you want:
http://jsfiddle.net/P6UzU/3/
I put the blue background and the red border in the li tag, and a white background in the "category" class. Also, change the whole border in "category" to a border-left.
You could use css tables and remove the float:left on the first div
FIDDLE
CSS
ul {
list-style: none;
width: 200px;
display:table; /* <--- */
}
li
{
display:table-row; /* <--- */
}
div.abbr {
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
display:table-cell; /* <--- */
}
div.category {
/*float: left;*/ /* <--- removed */
padding: 16px;
border: 1px solid red;
margin-left:64px;
display:table-cell; /* <--- */
}
As others have said,
li a { display: block; }
should achieve what you’re after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:
li { padding: 0; }
li a { display: block; padding: 1em; }
guys final i get the answer plz chk this....
html code:--
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr1">ABC</div>
<div class="category1">Very long or very shortshort & Very long or very shortshort</div>
</li>
</ul>
CSS:--
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
div.abbr1 {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category1 {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Script:--
$(document).ready(function() {
var rightHeight = $('.category1').height();
$('.abbr1').css({'height':rightHeight});
and to this thing work out you have to add jquery/1.8.2..
Demo:--Fiddle
My footer will not stay at the bottom of my page.
I tried the sticky footer trick, but no good.
Seems my footer has white space beneath it.
Adjusting height on it has done no good.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<link rel="stylesheet" type="text/css" href="style3.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script src="navigation.js"></script>
</head><body>
<div id="top">
<header>
<div id="topLeft">topleft</div>
<nav id="nav-wrap">
<ul id="nav">
<li>Home</li>
<li>Attendees<ul><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li></ul></li>
<li>Exhibitors</li>
<li>Speakers</li>
<li>Program</li>
</ul>
</nav>
<div id="topRight">topright</div>
</header>
</div>
<div id="middle">
<div id="headerLeft"></div>
<div id="headerimage">
<img src="header-2013.jpg"/>
</div>
<div id="headerRight"></div>
<br style="clear: left;" />
</div>
<div id="pagewrap">
<div id="content">
<!-- <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3>
<p>Unholy is a new, upcoming raiding guild with goals of
successfully accomplishing Player versus Environment and Player versus Player
raiding content. If thou art seeking such guild then thou would consider joining
us on our quest to victory over the evils that lurk within the depths of
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts
that roam abroad the forsaken ground in the Outlands and whish to further
explore and cleanse such places. If this should be thy calling then we welcome
you to our quest for victory, For the Horde </p> -->
</div>
</div>
<footer>
<div id="footer">
footer
</div>
</footer>
</body></html>
And here is the CSS:
/************************************************************************************
GENERAL
*************************************************************************************/
html{
height:auto;
}
body {
font: .9em/150% Arial, Helvetica, sans-serif;
color: #666;
overflow-x:hidden;
/******extra Mike Clayton **/
margin: 0;
padding:0;
height:100%;
}
a {
text-decoration: none;
color: #39C;
}
h1, h2 {
line-height: 120%;
margin: 0 0 10px;
color: #000;
}
header {
content: " ";
display: table;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 100%;
max-width:650px;
margin: 0px auto;
/**Mike Clayton**/
min-height:100%;
height:100%;
}
#content {
clear: both;
border-top: solid 1px #ccc;
padding-top: 20px;
margin: 20px 0;
width:100%;
/**Mike clayton**/
/* padding-bottom:250px; */
padding-bottom:55%;
}
#top{
width:100%;
background-color:#002664;
clear:both;
}
#topLeft{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#topRight{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#middle{
width:100%;
background-color:#AD1B30;
overflow: hidden;
}
#headerLeft{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#headerimage{
width:650px;
align:center;
margin:0 auto;
}
#headerimage img{
width:100%;
}
#headerRight{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#footer{
/* background-color:#002664;
width:100%;
margin-top:-100;
height:150px; */
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:#002664;
width:100%;
margin-top:-100;
}
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
margin-top: 20px;
}
/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}
/************************************************************************************
MOBILE
*************************************************************************************/
#media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
#headerimage {
display: none;
}
}
#media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
}
So, that last post from Kakarott worked.
Also, I used position:relative for my Media Query mobile dev and it made that same CSS work for my Mobile site.
So, for desktop and tablet, I'm using position:absolute and for mobile:relative.
FYI, I'm using a responsive design.
Check this
http://code.google.com/p/cleanstickyfooter/
and the best solution
http://www.cssstickyfooter.com/
Change your footer css to:
#footer{
clear: both;
position: absolute;
z-index: 10;
height: 3em;
bottom:0;
background-color:#002664;
width:100%;
}
I am designing a top bar for a website and cannot figure out how to force the <a> elements below have the same height as the parent <li> elements. The code below shows the <li> elements with a green background and the <a> elements with a yellow background. I would like to have the yellow boxes span the whole height of the green boxes. Setting the height of the <a> elements to 100% doesn't do trick. What am I missing?
<!DOCTYPE html>
<head>
<style>
div#topbar {
width: 100%;
height: 30px;
top: 0;
border: 1px solid black;
}
#topbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
#topbar ul li {
margin: 0;
padding: 0 10px;
background-color: green;
display: inline;
float: left;
}
#topbar a {
background-color: yellow;
}
</style>
</head>
<body>
<div id="topbar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
Its because tag is an inline element and it doesn't take height into account so you need make it block which can be made by various methods but most suitable in your case is 'float'.
div#topbar {
width: 100%;
height: 30px;
top: 0;
border: 1px solid black;
}
#topbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
#topbar ul li {
margin: 0;
padding: 0 10px;
background-color: green;
display: inline;
float: left;
}
#topbar a {
background-color: yellow;
float:left; /*add this*/
}
http://jsfiddle.net/YMPe2/
Have you tried :
#topbar a {
background-color: yellow;
display: inline-block;
}
the a tag should be display:block, then it will fill the parent. And lose the padding on the li tag.
Browser shows div only when I set exact height. But i want to create resizable div according it's contents. Tried height: auto and height:100%. It doesn't help.
My div looks like that. It's background div of sidebars and content.
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
UPDATE
my html looks like that
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(core/design/img/bg.png);
background-position:top left;
background-size:100%;
background-color:#fff;
background-repeat:no-repeat;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
}
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
overflow: visible
}
.header {
padding:20px;
}
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited{
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat { /
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><img src="core/design/img/logo.png" alt="Insert Logo Here" name="Insert_logo" width="438px" height="95" id="Insert_logo" style=" display:block; margin:0 auto;" />
<!-- end .header --></div>
<div class="wrapper">
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="sidebar2">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
div's will naturally resize in accordance with their content.
If you set no height on your div, it will expand to contain its conent.
An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div (wrapper) clears the floats.
Here's some ways to do this:
#wrapper{
overflow:hidden;
}
Or
#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}
make sure the content inside your div ended with clear:both style
Here is the Latest solution of the problem:
In your CSS file write the following class called .clearfix along with the pseudo selector :after
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then, in your HTML, add the .clearfix class to your parent Div. For example:
<div class="clearfix">
<div></div>
<div></div>
</div>
It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic.
Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "".
Source: http://css-snippets.com/page/2/
According to this, you need to assign a height to the element in which the div is contained in order for 100% height to work. Does that work for you?
As stated earlier by Jamie Dixon, a floated <div> is taken out of normal flow. All content that is still within normal flow will ignore it completely and not make space for it.
Try putting a different colored border border:solid 1px orange; around each of your <div> elements to see what they're doing. You might start by removing the floats and putting some dummy text inside the div. Then style them one at a time to get the desired layout.