I know this question has been asked before. I'm just practicing web design, and pretending to create a website for a martial arts school (Nashville Self-Defense is not a real business).
I'm having a problem, the top-margin value of #Slogan does not seem to be working. As a matter of fact, getting top and bottom margins to work has been a lingering problem I've continually encountered.
The result:
Can anyone solve this?
#Title {
border-width: 1px;
border-style: solid;
border-color: greenyellow;
width: 50%;
float: left;
margin-left: 45px;
margin-top: 10px;
margin-bottom: 0;
height: 42px;
}
#Title h1 {
font-family: Stencil, sans-serif;
font-size: 42px;
margin-top: 2px;
margin-left: 9px;
}
#Slogan {
border-width: 1px;
border-style: solid;
border-color: green;
width: 50%;
height: 50px;
float: left;
margin-left: 14%;
margin-top: none;
display: inline-block;
}
<div id="Container">
<div id="TopofPage">
<div id="Title">
<h1>Nashville Self-DEfense</h1>
<div id="Slogan"></div>
</div>
<div id="SocialMedia"></div>
<!--not shown in image-->
</div>
<div id="TopMenu">
<ul>
<li>HOME</li>
<li>CLASSES</li>
<li>STORE</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
Instead of margin-top:none; use margin-top: 0px !important
It has to be
margin-top: 0;
not
margin-top: none;
next thing is it go higher on '0' as long as the previous element(#title h1) has margin set.
Related
newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.
Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.
If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).
For example:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
can be written as
margin:20px 50px;
Or the following:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
can be written as:
margin:50px 100px 20px;
Same thing goes for padding.
you can't use pixels to set margin!
you have to set margin of the main class to 50% of page height and width like this:
(to resolve problems change percent of size and margin to fit 100%)
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:50%;
padding-left:50%;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
img{
margin-left:50%;
}
html , body{
height:100%;
width:100%;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
I was hoping for some help with a problem involving some divs.
I am doing a Udemy course to recreate the BBC website and I've got to a point where I have some divs with content but there is a gap between them.
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;
}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;
}
#wiggly-line {
height: 40px;
float: left;
}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;
}
#more-arrow {
height: 4px;
margin-left: 25px;
}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;
}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;
}
#menu-bar {
width: 1050px;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;
}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;
}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;
}
#local-news:hover {
text-decoration: underline;
}
#local-news img {
height: 20px;
padding-left: 10px;
}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;
}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;
}
<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">iPlayer</div>
<div class="topbar-section topbar-menu">TV</div>
<div class="topbar-section topbar-menu">Radio</div>
<div class="topbar-section topbar-menu">More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
Find local news
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
Home
UK
World
Business
Politics
Tech
Science
Health
Education
Entertainent & Arts
Video & Audio
More
</div>
</div>
I've tried playing around with various things (changing display, floating, trying to clear previous divs...) but I can't seem to figure out the problem. I was hoping for some advice about what I am doing wrong.
I read somewhere that whitespace between divs can sometimes be an issue. Could this be the problem?
(strangely, when I created the code snippet above, the gap was not showing in the results window but when I try it in Chrome, IE or Firefox, the problem occurs)
Many thanks in advance
thanks for the advice on my problem.
As mentioned in my last comment, it was the height of the div which was creating the gap (it wasn't tall enough). I think this was due to another element's padding pushing the lower div down, so when I increased the height it brought everything into alignment.
I'm still learning a lot about web development and I am grateful for the responses. I'm sure I'll be learning a lot more along the way. Many thanks!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly. Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements? So far float and position: absolute; don't work well. Thanks!
Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"
Here's the Code I'm working on:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Each positioning method has a purpose and well-defined, if sometimes not intuitive, behavior. You cannot pick one that "won't mess things up". There's no shortcut like "always use relative", because each method accomplishes something different that cannot be accomplished by the other methods.
I happen to think positioning in CSS is abysmally defined, but it's what we have to work with and the only thing you can do is learn what each one does and how they interact. There WILL be some things you cannot accomplish1, and until CSS layout matures that will continue to be the case.
The only advice I can give you is to budget some time, say 8-16 hours over the next few weeks, to play with basic layouts and experiment with all the positioning methods. Use Firefox or Chrome's developer tools to examine in detail how things are laid out, and make specific changes one at a time until you start to develop a feel for how the options interact with each other. This is a highly complex mess and it will take some time to learn it. But once you do you will have a skillset that will serve you well.
1 As I recently learned to my great disappointment. I did find some workarounds gross hacks that involved duplicating content but that way lies madness. I hope the new flex positioning stuff gets worked out with some sanity but I'm not holding my breath.
Remove this from your HTML :
<div id="searchbox_div">
</div>
but obviously keep the form inside it, it dosent need to be contained in a div since its already inside the nav element.
Here is working Fiddle
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A:
Here is the Code also in fiddle http://jsfiddle.net/SgtRx/ (should done this earlier, sorry)
Okay, My navigation bar is within the Div Wrapper, underneath the header, and on top of the content area (body).
I'm a pretty novice user, so excuse any mistakes I may be making.
When I added border to separate each block (button or text) it separated the buttons well, however, it leaves a small whitespace at the end of the nav bar (the right-hand side).
The wrapper Div is 1000px and I have 5 buttons, each 200px, Therefore without borders they fit in perfect, but with the borders if I keep the width at 200px the nav bar moves down, and when I reduce the width of the nav bar, it leaves the white space on the right. I have been doing this for 2 days and i finally give in. Please Help if you can. Thanks.
<body>
<div id="wrapper">
header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" order="0" align="center" cellpadding="0" cellspacing="0"/>
<nav id="mainnav">
<ul>
<li><a href="index.html" class="noBorder" >Home</a></li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Test</li>
<li>Test1</li>
<li>Where to Stay</li>
</ul>
</nav></div>
</header>
And the CSS
#mainnav ul {
margin-top: auto;
margin-bottom: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
float: left;
width: 1000px;
margin-left: auto;
list-style-type: none;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-right: auto;
right: 0px;
left: 0px;
top: 0px;
bottom: 25px;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
width: 197px;
display: block;
float: left;
text-align: center;
background-color: #020202;
color: #FCFCFC;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
line-height: 290%;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
left: 0px;
margin-top: auto;
border-color: #FFFFFF;
border-left-style: solid;
border-width: thin;
right: 0px;
bottom: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
opacity: 1;
}
.noBorder {
border-left-style: none !important;
}
I highly recommand you to use width:20% for each button instead of using fixed value.
Same goes for the navbar, use width:100%
This is your anserw:
jsfiddle
#mainnav a{
width:19.91%;
}
Here is the code:
I used display flex on ul.
Than set direct child li of ul *flex:1.
Lastly, I set a tag to width:100%
I have removed some unwanted code.
#charset "utf-8";
body {
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
margin: 0;
background-color: #250e20;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
padding-bottom: 0px;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
min-width: 739px;
max-width: 1000px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
position: static;
}
#hero {
clear: left;
position: relative;
}
#hero img {
min-width: 100%;
min-height: 100%;
}
h1,
h2 {
color: #3399cc;
font-family: source-sans-pro;
font-weight: 600;
text-transform: none;
}
h1 {
font-size: 73px;
text-align: center;
text-transform: uppercase;
margin-top: 0px;
color: #ffffff;
}
#main {
width: 58%;
float: left;
margin-left: 2px;
}
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
clear: left;
background-color: #02080a;
color: #ffffff;
padding-left: 2%;
bottom: 10px;
position: static;
padding-right: 2px;
}
figure {
width: 420px;
}
figcaption {
display: block;
font-weight: bold;
font-size: 14px;
text-align: center;
}
figure img {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #ffffff;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
clear: none;
}
.floatleft {
margin-right: 10px;
float: left;
}
.floatright {
margin-left: 10px;
float: right;
}
/*This will style links in all states*/
a {
text-decoration: none;
font-weight: bold;
right: 0px;
}
a:link {
color: #ff6600;
}
a:visited {
color: #ff944c;
}
a:visited {
color: #ff944c;
}
a:hover,
a:active,
a:focus {
color: #f5f406;
text-decoration: underline;
list-style-type: none;
}
/*This targets the unordered list nested inside the <nav> element with the ID mainnav*/
#mainnav ul {
padding: 0;
display: flex;
width: 100%;
list-style-type: none;
position: relative;
right: 0px;
left: 0px;
bottom: 25px;
}
#mainnav ul>li {
flex: 1;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
z-index: 1;
width: 100%;
display: inline-block;
text-align: center;
background-color: #020202;
color: #fcfcfc;
text-transform: uppercase;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
border-color: #ffffff;
border-left-style: solid;
border-width: thin;
}
.noBorder {
border-left-style: none !important;
}
#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav a.thispage {
text-decoration: none;
background-color: #43a6cb;
}
#hero article {
width: 36%;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 10px;
right: 43px;
background-color: #d88673;
border-radius: 15px;
color: white;
}
#hero h2 {
color: white;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: -7px;
}
#container {
background-color: #e1e54e;
display: block;
width: 1000px;
height: 420px;
float: left;
overflow: auto;
}
#prev {
background-image: url(../images/larrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: left;
position: relative;
z-index: 99;
}
#next {
background-image: url(../images/rarrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: right;
position: relative;
z-index: 99;
}
#slider {
display: block;
width: 1000px;
height: 420px;
float: left;
position: absolute;
overflow: hidden;
}
article,
aside,
figure,
footer,
header,
nav {
display: block;
}
#test {
height: 220px;
margin-top: -8px;
margin-bottom: -8px;
padding-bottom: 0px;
position: static;
width: 1000px;
}
<body>
<div id="wrapper">
<header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" border="0" align="center" cellpadding="0" cellspacing="0" />
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Where to Stay</li>
</ul>
</nav>
</div>
</header>
<div id="hero">
<div id="hero2">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="images/slide2.jpg" width="1000" height="420" />
<img src="images/slide3.jpg" width="1000" height="420" />
</div>
<div class="controller" id="next"></div>
</div>
</div>
</div>
<article id="main">
<h2>Riding the Cable Cars</h2>
<p>No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square
to Fisherman's Wharf, and a third route along California Street.</p>
<p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great
skill. He needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the
downward slopes.</p>
<figure><img src="images/cable_car1.jpg" width="400" height="266" alt="" />
<figcaption>The cable car terminus near Union Square</figcaption>
</figure>
<p>Although the cable cars are now mainly a tourist attraction, they're still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays.</p>
</article>
<aside id="sidebar">
<h2>Cable Car Tips</h2>
<p>A single ride on a cable car costs $6. If you plan to travel around the city, it's often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco's extensive public
transport system, including the cable cars (but not the BART subway system). Even a single-day passport ($14) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don't want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
on the way. The California Street route is generally less crowded (but not as spectacular).
</aside>
<footer>
<div id: "footer">
<p>© Copyright 2014 Bayside Beat</p>
</div>
</footer>
</div>
</body>
</html>