This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance
Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.
I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}
Related
I'm new to HTML and CSS, I don't know where is the mistake in my code.
So I have a class header-text to show "Welcome to MOK VPS" with h1.
I used float:left; on my CSS code but it stills show the text on the center. But if I use float:right; it moves to the right.
I'm just messing around with HTML and CSS after learning it a few hours and reviewing what I learned.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
I've added borders around the elements to illustrate what is happening here. Click Run code snippet to see.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
If you look closely, you'll see that the body-text div is actually caught on the header-home div. To prevent that, use clear to cause your div to go to the next line, after any previously floated elements.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
clear: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
Just change in your CSS for class body-text. "Absolute positioned" element has no positioned ancestors, it uses the document body, and moves along with page scrolling.:
.body-text {
position:absolute;
}
You can simple add the position:absolute on your class body-text. Just add that get you problem fixed. But you also can make this:
.body-text {
position: absolute;
left: ***** Here you define how much you wanna move the tag, for example 20px***
}
You need to style <h1>. Like text-align: left;.
h1{
float: left;
text-align: left;
display: inline-block; /*use this code if needed. It can be replaced with text-align*/
}
I have just started my website, and I am currently working on the header/navigation bar. I've got it looking how I want, however the one thing I can't figure out, is how to centre the logo and hyperlinks vertically in the header?
Here is my HTML:
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><img src="logo.png"></h1>
</div>
<div class="nav">
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<p>
</p>
</div>
</body>
And CSS:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
margin: auto;
background: #F4F4F4;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
/**********************************
HEADING/NAVIGATION
***********************************/
li {
list-style: none;
float: left;
margin-left: 25px;
padding-top: 10px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #5BBB9B;
width: 100%;
height: 200px;
top: 0;
position: fixed;
border-bottom: 1px solid black;
}
.logo {
float: left;
}
.nav {
float: right;
}
I have tried using vertical-alignment: middle;, however this didn't work.
Anyone have any suggestions?
Use
display:table;
height:100%;
for the parent and
display: table-cell;
text-align: center;
vertical-align: middle;
and check out this awesome article:
https://css-tricks.com/centering-in-the-unknown/
I have an issue whereby my div .gridContainer (black background) is not expanding with the body div but is for the footer. From what I can tell it should just be a simple fix using clear:both; in css3 on an empty div.
...however this doesn't seem to work! I've had a play around but can't seem to figure the issue out any chance somebody could clue me in as to whats happening here? (using chrome).
<body>
<div class="gridContainer clearfix">
<div id="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>VIDEOS</li>
<li>PHOTOGRAPHY</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="body">
<div id="CALogo"><img src="Images/CALogoLarge.png" alt="CreativeAbyss"></div>
</div>
<div id="footer">
<div id="FooterLeft">©2014 Creative Abyss. All Rights Reserved.</div>
<div id="FooterRight">Social Icons Here </div>
<div id="test"></div>
</div>
<div id="test"></div>
</div>
</body>
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
height: 100%;
}
#navigation {
float: left;
margin-left: 0;
width: 100%;
display: block;
height: auto;
padding-top:20px;
font-family: 'Open Sans', sans-serif;
font-size:13px;
font-weight:200;
}
ul li {
display: inline;
list-style-type: none;
margin-left: 35px;
marginright: 4px;
float:right;
color:#FFF;
}
ul a {
text-decoration: none; /* no underline */
color:#FFF;
}
ul a:hover{
text-decoration:underline; /* no underline */
color:#FFF;
}
#body {
margin-left: 0;
width: 100%;
display: block;
height: 50px;
clear:both;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
padding-bottom:10px;
}
#FooterLeft {
clear: both;
float: left;
margin-left: 0;
width: 48.9795%;
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-weight:200;
color:#FFF;
}
#FooterRight {
clear: none;
float: left;
margin-left: 2.0408%;
width: 48.9795%;
display: block;
}
#test{
clear:both;
height:1px;
}
#CALogo {
background-color:#039;
}
}
So for anyone interested I figured out what was going on... I was foolishly using the id of "body" which obviously already exists and was being toyed around with in the boiler plate... embarrassing.
I'm trying to build a horizontal navigation using %'s, and I cant seem to figure out whats going on. I have it all set up how I want it, but whenever I specify a size to the A or LI nothing changes, and therefore, I can only see a silver of my background image.
<div id=mainwrap>
<div id=header>
<div id = title>
<img src="images/hangaquilt.png" width="483" height="78" alt="Hang A Quilt">
</div>
<div id = cartstatus>
<p> Your Cart Is Empty </p>
</div>
<div id=nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
<li>View Cart</li>
<li>Dealers</li>
</ul>
</div>
</div>
<div id=bodycontent>
<div id=sidebar>
</div>
<div id=bodytext>
</div>
</div>
<div id=slideshow>
</div>
<div id=footer>
</div>
</div>
and the CSS
body {
background-color: rgb(238,225,185);
}
#mainwrap {
margin: 0 auto;
height: 700px;
width: 75%;
max-width:1024px;
min-width:800px;
}
#header {
margin: 0 auto;
margin-top: 3%;
width: 100%;
height: 25%;
}
#header img{
margin-left: 3.3%;
}
#title {
float:left;
width: 55%;
}
#cartstatus{
float: right;
width: 45%;
}
#cartstatus p{
margin-right: 7.1%;
float: right;
}
#nav{
clear: both;
width: 100%;
height: 33%;
font-family:"Rockwell Extra Bold",Trebuchet MS, Arial, Helvetica, sans-serif;
}
#nav ul {
height: 100%;
list-style-type: none;
text-align: center;
}
#nav li{
padding: 0;
width: 20%;
height: 100%;
font-size:18px;
display:inline;
}
#nav ul li a{
background-image: url(../images/navbg.png);
width: 19%;
height: 98%;
color: black;
text-decoration: none;
}
I've done navigation likes this before, and have never had this problem. It's really frustrating as I know it's something really simple that I'm missing.
If you define element as "inline", you can't change it's width or height.
Instead of
display:inline;
try
display:inline-block;
Here is what you want: http://jsfiddle.net/JmTKb/
This is my HTML
<div id="footer">
<div id="footer_content">
© 2012 Company, Inc.
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</div>
This is my CSS
/* FOOTER */
#footer {
position: relative;
margin-top: -60px;
text-size:12px;
height: 60px;
clear:both;
background-color: blue;
line-height: 60px;
text-align:right
}
#footer_content {
width: 940px;
margin: 0 auto;
}
#footer ul {
list-style: none;
position: absolute;
top: 0px;
}
#footer ul li {
float: left;
margin-right: 5px;
}
#footer ul li a {
font-weight: bold;
margin-right: 5px;
text-decoration: none;
}
#footer ul li a:hover { }
Currently the copyright is on the right and the links are on the left. It should be the other way around. What adjustment are you meant to make to move them?
I pretty much agree with what Space Beers says but there are ways to improve this.
HTML:
<div id="footer">
<div id="footer_content">
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
<div class="copyright">
© 2012 Company, Inc.
</div>
</div>
</div>
CSS:
#footer {
position: relative;
margin-top: -60px;
text-size:12px;
height: 60px;
background-color: blue;
line-height: 60px;
text-align:right
}
#footer_content {
width: 940px;
margin: 0 auto;
}
#footer ul {
float:right;
list-style: none;
}
#footer ul li {
display:block;
float: left;
margin-right: 5px;
}
#footer ul li a {
font-weight: bold;
margin-right: 5px;
text-decoration: none;
}
#footer .copyright{
float:left;
}
This should be completely browser compatible.
Put your company info in a containing div and float that left.
<div id="footer">
<div id="footer_content">
<div class="company_info">© 2012 Company, Inc.</div>
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</div>
.company_info{
float: left;
}
use display:inline;in li class