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.
Related
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 having a little trouble figuring out why I have about 10px of whitespace at the top of my html file. In CSS, I made the margin and padding 0 in "body" but it still is there. Any help? Thanks!
Update: So I found out that removing the !doctype html at the top removes the white space with google chrome browser but not with firefox. But from my research, you need the !doctype html to tell the browser that its html5 so I don't know where to go from here.
<!doctype html>
<html>
<head>
<title>Personal WebSite</title>
<style>
html body{
margin:0;
padding:0;
}
#topbar {
background-color:#0876BB;
width:100%;
height:40px;
color:#343436;
}
#derek{
float:left;
font-size: 1.3em;
padding-left:100px;
padding-top:5px;
font-weight:bold;
}
#Menu{
padding-right: 30px;
}
#Menu li{
float:right;
font-size: 1.3em;
font-weight: bold;
display:inline;
margin:5px 10px 0px 0px;
cursor:pointer;
}
li:hover{
color:red;
}
.break{
clear:both;
}
#title{
position:absolute;
}
img{
position:relative;
opacity:0.6;
height:100%;
width:100%;
}
</style>
<body>
<div id="topbar">
<div id="derek">Derek</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="title">
<h1>Web Development</h1>
<img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
</div>
</body>
</head>
</html>
The ul from your head, you need to add margin-top: 0; he is the cause of your top margin
The margin on your ul is causing the grief.
I've updated the css to remove the margin
To trouble shoot this, I just removed elements until I found the block of html that was causing the issue.
html body{
margin:0;
padding:0;
}
#topbar {
background-color:#0876BB;
width:100%;
height:40px;
color:#343436;
}
#derek{
float:left;
font-size: 1.3em;
padding-left:100px;
padding-top:5px;
font-weight:bold;
}
#Menu{
padding-right: 30px;
}
#Menu ul {
margin : 0;
}
#Menu li{
float:right;
font-size: 1.3em;
font-weight: bold;
display:inline;
margin:5px 10px 0px 0px;
cursor:pointer;
}
li:hover{
color:red;
}
.break{
clear:both;
}
#title{
position:absolute;
}
img{
position:relative;
opacity:0.6;
height:100%;
width:100%;
}
<!doctype html>
<html>
<head>
<title>Personal WebSite</title>
<body>
<div id="topbar">
<div id="derek">Derek</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="title">
<h1>Web Development</h1>
<img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
</div>
</body>
</head>
</html>
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 trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
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.