So, essentially the last time I ever did any web-page development, there was only HTML, and I didn't have anymore than a basic understanding anyways. So now, I'm playing catch up and trying to learn CSS. My issue is a horizontal navbar, which doesn't stay perfectly centered. I've tried adjusting widths, and borders, and margins but I'm missing something.
With my current layout, there is a tad more whitespace on the left than the right, and I am stuck.
Here's the jsfiddle:
http://jsfiddle.net/PkvZ7/
CSS:
<!-- JASCO NAVBAR -->
ul
{
width:100%;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:none;
overflow:hidden;
}
li
{
align:center;
width:20%;
margin:0;
padding:0;
display:inline-block;
list-style-type: none;
}
a:link,a:visited
{
display:block;
width:100%;
font-weight:bold;
font-size:20px;
color:#FFFFFF;
background-color:#FF6103;
text-align:center;
padding:5px;
text-decoration:none;
font-variant:small-caps;
}
a:hover,a:active
{
background-color:#000000;
color:#FF6103;
}
#container {
width:100%
}
<!-- TOP CSS-->
.top {
position:absolute;
width:80%;
height:10%;
margin-left:auto;
margin-top:20px;
margin-right:auto;
color:#000000;
padding:0;
}
<!-- CONTENT CSS-->
.content {
position:absolute;
width 100%;
margin-left:10px;
margin-right:10px;
padding:3px;
color:#dddddd;
}
#img
{
}
<!-- TOP IMAGE CSS-->
img.center {
display:block;
margin-left:auto;
margin-right:auto;
}
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jascostyle.css">
<title>Single"Frame" Test</title>
</head>
<body>
<div id="container">
<center>
<div class="top">
<img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="content">
<h1>This is under construction!</h1>
</div>
</div>
</body>
</html>
I appreciate any help/explanation on this matter.
Thanks.
You need a fixed width + margin-left:auto and margin-right:auto. You should not be using absolute positioning for your content - let it flow naturally.
The <center> tag has been deprecated, so use the same technique for your outer "container" wrapper with a width of 960px;.
ul {
width:500px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
In general when using list-based menus, use float:left on your LI, use display:block on the A-tag and put all other styling on the A-tag, not the list itself.
See my tutorial: I Love Lists.
Related
I'm exercising about flexbox and I would create a simple layout. But I have some difficulties as can be seen from the code. I want split the content (the two sections in the code) in two parts: 30% and 70% but the flexbox instruction doesn't accomplish this. Why? How can I fix it?
Code on JSFiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Layout</title>
<style type="text/css">
body,html{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container{
display: flex;
flex-wrap: wrap;
}
.mainheader{
flex:100%;
padding:35px 0;
color:white;
text-align: center;
background-color: rgb(50,180,200);
}
nav{
background-color: black;
flex:100%;
}
ul.navbar{
list-style:none;
overflow: hidden;
margin:0;
padding:0;
}
ul.navbar > li{
float:left;
text-align:center;
}
ul.navbar a:hover{
color:black;
background-color:white;
}
.navbar a{
display:block;
text-decoration:none;
color:white;
padding:15px;
font-size:large;
}
.side{
flex:30%;
padding:10px;
border:thin solid black;
}
.content{
flex:70%;
}
</style>
</head>
<body>
<div class="container">
<header class="mainheader">
<h1>My Website</h1>
<p>With a flexible layout</p>
</header>
<nav>
<ul class="navbar">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<section class="side">
<header>
<h1>About me</h1>
</header>
<h4>
Photo of me
</h4>
</section>
<section class="content">
Lorem ipsum
</section>
</div>
</body>
</html>
It was a very very stupid mistake concerning the margins-paddings-borders. These when the dimension is in percentage are addicted to width, thus the second part of the layout wraps. To prevent this you have to use :
box-sizing:border-box;
but I'm a knob and I put this property inside html,body tags instead than the "*" selector:
This is the fix:
*{
box-sizing:border-box;
}
Quick rundown on what I'm trying to achieve;
I'm making a floating(left) side-nav bar with two child elements, the first being a clickable icon which sits in a static position that will set the second child's width from 0 to 100% of the parents width.
I'm trying to figure out why setting the second child's width to 0%/0 achieves nothing, I can only assume I'm missing something really simple here.
Code: JSFiddle
#header{
float:left;
position:fixed;
background:#333;
min-height:100%;
overflow:hidden;
z-index:1;
width:80px;}
#toggle-menu{
background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
width:50px;
height:50px;
background-size:cover;
margin:15px 15px;}
#nav{width:0%;}
Thanks for helping this noobie in advance,
Dodd
you are just missing this :)
#nav{width:0%; overflow:hidden;}
#nav {display: none;} and when hover on the parent, set it to display: block;
jsfiddle: https://jsfiddle.net/mjqym5c4/2/
body,wrapper{min-height:100px;padding:0;margin:0;font-family: 'Roboto', sans-serif;}
body{background-color:#999;}
#header{
float:left;
position:fixed;
background:#333;
min-height:100%;
overflow:hidden;
z-index:1;
width:80px;
}
#header:hover{
width:200px;
}
#header:hover #nav {
display: block;
}
#nav {
display: none;
}
#toggle-menu{
background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
width:50px;
height:50px;
background-size:cover;
margin:15px 15px;
}
#nav{width:0%;}
#nav ul{display:inline;list-style:none;}
#nav ul li{text-align:left;padding:0 15px;}
#nav ul li a{text-shadow:0 1px 2pt black;color:#fff;text-decoration:none;text-transform:uppercase;}
#banner{width:960px;margin: 0 auto;min-height:100px;background:#333;}
#content{width:960px;margin:0 auto;min-height:1000px;background:#666;}
<body>
<div id="wrapper">
<div id="header">
<div id="toggle-menu"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Drive</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- /header -->
<div id="banner">
</div>
<div id="content">
</div>
<!-- /content -->
<div id="footer">
</div>
<!-- /footer -->
</div>
<!-- /wrapper -->
</body>
And to answer your question, why width: 0; did "nothing", is because the text is not made smaller. For that you would use font-size: 0;. But the text will still be there.
I'm trying to get a really basic layout using only CSS and divs. What I would like to do is have 3 big divs on the same row and a small div below the first div of the first div in the row. Since I'm trying to set for all of them an height of 400px except for the first one and the small one - which have an heigh of 300px and 100px - I would expect them to show all on the same "line", making a big block. What I get instead is the following:
This is my CSS:
body {
background-color:white;
}
header {
background-color:black;
color:red;
height:10%;
width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
width:10%;
float:left;
overflow:hidden;
}
article {
height:100px;
clear:left;
width:10%;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
width:50%;
float:left;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
float:left;
width:40%;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
clear:both;
}
aside img
{
max-width:100%;
max-height:100%;
margin:0 auto;
display:block;
}
And this is my HTML:
<body>
<header>
<h1 align="center"> Welcome to the official website of Almost Free Furniture</h1>
</header>
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
<aside id="aside">
</aside>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
I'm guessing the problem is in the fact that I want the yellow div to float next to two floating divs, and that may be impossible. Any tips on how to solve this?
I would fix this by wrapping the nav and article elements in a separate element:
.left-column {
width: 10%;
float:left;
}
nav {
background-color:#eee;
text-align:center;
height:300px;
width:100%;
overflow:hidden;
}
article {
height:100px;
width:100%;
background-color:blue;
overflow:hidden;
}
The markup would then become like this:
<div class="left-column">
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
Why not put a parent around your three elemtns and give it display: inline-block;?
Here is a Codepen for an example of a way to solve your problem: LINK TO CODEPEN
Here is some code too if you prefer to look here:
HTML
Welcome to the official website of Almost Free Furniture
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<nav>
<p> Products </p>
</nav>
<article>
<p>Hi</p>
</article>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<section>
<p>Please excuse us while we build our new website.</p>
<p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>
</div>
<div class="inline-div"> <!-- These are the inline-block wrappers -->
<aside id="aside">ANOTHER</aside>
</div>
<footer>
This is a work in progress.<br>
Copyright AlmostFreeFurniture.
</footer>
CSS
header {
background-color:black;
color:red;
height:10%; width:100%;
padding:1px;
font-family:verdana;
}
nav {
background-color:#eeeeee;
text-align:center;
height:300px;
overflow:hidden;
}
article {
height:100px;
background-color:blue;
overflow:hidden;
}
section {
background-color:yellow;
height:400px;
font-style:italic;
overflow:hidden;
}
aside {
background-color:red;
height:400px;
overflow:hidden;
}
footer {
background-color:black;
padding:5px;
text-align:center;
color:white;
}
aside img {
max-width:100%; max-height:100%;
margin:0 auto;
display:block;
}
.inline-div { display: inline-block; width: 33%; }
I'm new to web design and I'm making a website as a project for my friend. I've got two divs with different content in each div, one for the main content and one for news and other things which I want at the side.
I've sorted the content div out and thats fine its where I want it. But when I go to float the news div right it goes from under the content div (Inside the wrapper div still) to out side the wrapper div but to where I want it. (I know this because for now I've got a blue border round so I can make sure everything is inside where I want it to be.)
Heres my code and css:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" type="text/css">
<title>Bake Away</title>
</head>
<body>
<img src="img/logo.png">
<img src="img/ad_bar.png">
<div id="wrapper">
<div id="navBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Responsibility</li>
<li>Working With Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
<div id="images">
<img src="img/scroll_1.png">
</div>
<div id="content">
<span>Welcome to the Bake Away Bakery, here you can find out about
all the wonderful things we bake. How you can place orders, who we
bake for, where we're based, apply for jobs and contact head office.</span>
</div>
<div id="news">
<h3>Latest news:</h3>
<span>We've just started our new line of cakes that should
hit the shelves by Monday.</span>
<span class="read">Read More</span>
</div>
</div>
</body>
</html>
body{
margin:0;
padding:0;
width:100%;
background-color:#E6E6E6;
font-family:consolas;
font-size:16px;
font-weight:normal;
text-align:center;
}
img{
margin-top:5px;
margin-right:15px;
}
#wrapper{
width:1000px;
border:1px solid blue;
margin:3px;
margin-left:13px;
text-align:left;
}
#navBar{
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center;
text-align:center;
}
#navBar ul{
list-style-type:none;
}
#navBar li{
display:inline;
}
#navBar a{
text-decoration:none;
background-color:#BDBDBD;
color:black;
padding:2px;
}
#navBar a:hover{
text-decoration:underline;
background-color:#FE2E2E;
color:white;
}
#images img{
margin-left:50px;
}
#content{
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
}
#news{
width:300px;
}
Well, you can add display: inline-block;, Simple as hell ;)
Add display: inline-block to the following css:
#navBar {
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center; // there is nothing like this. Wrong text-align:center;
display: inline-block;
}
#images img {
margin-left:50px;
display: inline-block;
}
#content {
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
display: inline-block;
}
#news {
width:300px;
display: inline-block;
}
Check this JSFiddle
display:flex is how you do it.
I have all my divs centered with the left and right edges vertically aligned, but when I added the ul and li then my .nav started to have a background color that extends past the right hand edge. Any idea how to lock this down? max width doesn't prevent it from flowing outwards.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />
</div>
<div class="navContainer">
<div class="miniNav">
<img src="image/link_banner.nav.png" width="189" height="44"/>
</div>
<div class="nav">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<div class="content">
<div class="contentBody">
</div>
<div class="sidebar1">
</div>
</div>
<div class="footer" >
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#666;
}
.container{
position:relative;
margin-top: 0%;
position:relative;
width:1000px;
margin:0px auto;
}
.header{
position:relative;
float:left;
width:900px;
height:120px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
.navContainer{
position:relative;
float:left;
width:100%;
height:80px;
margin:0px 0px 0px 0px;
}
.miniNav{
height:100%;
position:absolute;
right:0px;
}
.nav{
float:left;
max-width:900px;
width:900px;
height:100%;
background-color:#FFFFFF;
overfow:hidden;
margin: 0 20px 0 50px;
}
ul.nav{
list-style:none;
padding: 0px;
}
ul.nav li{
display:inline;
padding:0px;
float:left;
}
.content{
float:left;
width:900px;
min-height:400px;
background-color:#FFFFFF;
margin:0px 50px 0px 50px;
}
.footer{
float:left;
width:900px;
height:80px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
Both div and ul has class 'nav'. Ul with class nav should not have margins (they have already been added in div). So add:
ul.nav {margin: 0}
.nav {
width: 850px;
}
jsFiddle: http://jsfiddle.net/kongr45gpen/a5Auj/
What you really need to do is simply remove a lot of properties.
You should also set .container to 900px instead of 1000px, because that's how wide all the things inside it are.
You can remove almost all of the instances of float: left and margin.
Block-level elements (such as divs) will by default expand to fill the available width, so you don't need to specify width: 900px so many times. This isn't the behaviour if you float: left an element, but I've removed your instances of it.
So, bearing all that in mind, see: http://jsbin.com/ozemoy. Just one width is being set :)