I'm trying to implement a CSS dropdown menu but whenever I do so, the <h1> and <p> tags wrap around the drop down menu boxes.
Can anyone suggest a solution to this? I'm only just learning CSS now and would appreciate any input.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id= "container">
<img src="images/title.jpg"/>
<div id="navigation">
<ul class="navbar">
<li>
Home
</li>
<li>
HTML5
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
CSS3
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
Links
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="content">
<h2>Home Page</h2>
<p>This is a test paragraph. This is a test paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
and the CSS is:
#charset "utf-8";
/* CSS Document */
#container{
width:800px;
background-color:#00FF00;
border:1px solid black;
height:1000px;
z-index:-9;
margin:auto;
}
#logo{
background-color:#FF0033;
border:#000 1px;
width:800px;
height:200px;
overflow:hidden;
}
#navigation{
background-color:#FFF;
border:#000 1px;
width:800px;
height:30px;
}
#content{
background-color:#6F3;
border:#000 1px;
width:780px;
height:400px;
margin:10px;
}
#footer{
background-color:#FF0;
border:#000 1px;
width:800px;
height:100px;
}
.navbar {
/*border-right: 1px solid #54879D;*/
height: 40px;
margin: 0 0 0 0;
padding: 0;
}
.navbar li {
background-color: #366B82;
float: left;
font: bold 12px/1.2em Arial,Verdana,Helvetica;
height: auto;
list-style: none outside none;
margin: 20 0;
padding: 0;
text-align: center;
width: 160px;
}
.navbar a {
/* border-left: 1px solid #54879D;*/
border-right: 1px solid #1F5065;
color: #FFFFFF;
display: block;
padding: 10px 10px;
text-decoration: none;
}
.navbar li:hover, a:hover {
background-color: #54879D;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879D;
}
.navbar li ul li a {
border-color: #74A3B7 #1F5065 #1F5065;
border-left: 1px solid #1F5065;
border-right: 1px solid #1F5065;
border-style: solid;
border-width: 1px;
}
.navbar li ul li a:hover {
background-color: #366B82;
}
update these classes:
working DEMO
.navbar li ul li {
background-color: #54879D;
float:none; /*added*/
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
position:absolute; /*added*/
}
Related
I need to draw a small vertical line that should be appear after every navbar li.
Buut the issue is whenever I try to draw something, navbar gets messed up and the navbar goes into second lines. I cant really draw a vertical line either.here's the code
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Double Double</title>
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/double.css" rel="stylesheet">
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="margin: auto;display: table;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<hr class="vertical"/>
<li>Deals</li>
<li>Pickup Deals</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
</body>
</html>
css
/*navbar properties */
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
.navbar a.navbar-brand {
padding: 9px 15px 8px;
}
.navbar{
font-family: young;
clear: both;
}
.navbar a{
color: #515254;
}
.navbar-nav{
font-size: 20px;
padding-top: 20px;
}
#bs-example-navbar-collapse-1{
float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
color: #007f3d;
background: none;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-toggle {
border: 1px solid #000;
}
.verticalLine {
border-left: thick solid #ff0000;
}
hr.vertical
{
color: black;
width: 0px;
height: 100%; /* or height in PX */
}
/*navbar properties */
JSFIDDLE
Use border-right for each menu li instead of using hr.
.navbar-nav>li{
border-right: 1px solid #000;
}
and remove the last element border.
.navbar-nav>li:last-child{
border: none;
}
You may not add <hr> element. just write this:
.nav > li:not(:last-child) {
border-right: 1px solid red;
box-sizing: border-box;
}
box-sizing: border-box; is for width of li wouldn't exceed its original width
May be this is what you want..
.navbar-default {
background: #005986;
}
.navbar {
border: 0;
border-radius: 0;
}
ul.nav {
list-style: none;
border-right: 1px solid #84B6D0;
}
ul.nav li {
padding: 20px 0;
display: inline-block;
}
ul.nav li a {
padding: 20px 10px;
color: #fff;
position: relative;
}
ul.nav li a:after {
position: absolute;
content: "";
width: 2px;
height: 60%;
right: 0;
background: red;
top: 50%;
transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
position: absolute;
content: "";
width: 2px;
height: 60%;
left: 0;
background: white;
top: 50%;
transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: blue;
}
.navbar-default .navbar-nav>li>a:hover {
background: #022E44;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
</nav>
Box-shadow does not create new elements. Try adding:
#media (min-width: 768px)
.navbar-nav > li {
...
box-shadow: inset -1px 0 0 0 black; // high element or..
box-shadow: 16px 0 0 -15px black; // .. closer to text height
}
.navbar-nav > li:last-of-type {
...
box-shadow: none;
}
You should take a look at this css selector ~.
http://www.w3schools.com/cssref/css_selectors.asp
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-left: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
You can add the following lines in your css file. the problem will be solved.
ul.navbar-nav li{
float: left;
list-style: none;
padding: 0px 6px;
border-right: 1px solid #000;
}
ul.navbar-nav li a{
text-decoration: none;
}
ul.navbar-nav li:last-child{
border-right: none;
}
or instead of using border-right: 1px solid #000; in li you can use an image here as a background.
here is my codepen link: http://codepen.io/rounak/pen/dOgLBx
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-bottom: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
doing a project at uni and I've completely misread the brief, used HTML5 in my project and realised that I'm not allowed to do this. Oops!
My only problem is, I've tried to convert it to XHTML Strict 1.0 standards by using divs and it just isn't as easy as I thought.
I will only post up the nav section as that's what I need help with, no need for all the extra bits and bobs.
Before I post - just wanted to clarify the question:
This code is HTML5 compliant, I need it to be XHTML Strict 1.0 compliant but I can't get the CSS working with divs in place of the nav function.
Here is the code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
<div id="whole">
<div id="header">
<img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
</div>
<div id="navbar">
<div id="container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Link
<ul>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
aaaand here is the CSS
div.whole {
margin-left: 15%;
margin-right: 15% }
div.header {
width: 100%; }
div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }
img.logo {
display: block;
margin-left: auto;
margin-right: auto }
#content
#footer
#navigation {
width: 800px;
margin: 30px auto;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
margin: 0;
padding: 0;
display: inline-block; /*this is the second bit that centers the menu*/
position: relative;
list-style: none;
background: #fff;
}
nav#menu ul li a {
padding: 1px 20px;
display: block;
font-size: 17px;
font-weight: 300;
color: #cc0000;
text-decoration: none;
}
nav#menu ul li:hover {background: #fff;}
nav#menu ul ul {
width: 160px;
margin: 0;
padding: 0;
position: absolute;
top: 42px;
left: -999px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 0 transparent;
}
nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
margin: 0 0 0 -80px;
left: 50%;
}
nav#menu a:hover {color: #540000;}
Often, you're using IDs in your HTML, but styling based on classes.
e.g. If you're going to say
div.navbar {
...
}
That will apply to:
<div class="navbar">...</div>
not
<div id="navbar">...</div>
I am trying to add 2 images side by side in my header, following that I want my website title GARY MANN LLC and below that Residential Contractor, and then over on the right side of the header I want space to add social buttons/links. How can I divide the space up in the cleanest manner using just css and html heres what ive got to work with:
HTML:
<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>GARY MANN LLC</title>
<link rel="stylesheet" href="styles/gmann.css" type="text/css" />
</head>
<body>
<header>
<center>GARY MANN LLC</center>
<center>Residential Contractor</center>
</header>
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>Our Crew</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Services
<ul>
<li>Carpentry</li>
<li>Waterproofing</li>
<li>Concrete</li>
<li>Masonry</li>
<li>Property Maintenance</li>
<li>Metal Construction</li>
<li>Interior Design</li>
<li>Demo & Salvage</li>
</ul>
</li>
<li>Portfolio
</li>
<li>Contact
<ul>
<li>Via Email</li>
<li>Web Form</li>
<li>Carrier Pigeon</li>
</ul>
</li>
</ul>
</nav>
<div id="wrapper">
<section id="content">
<!-- all the content in here -->
</section>
<section id="left_side">
</section>
</div> <!-- end wrapper -->
<footer>
<div id="footer_center">
<section id="social_links">
<h3>Connect With Us</h3>
</section>
<section id="site_map">
<h3>Site Map</h3>
</section>
</div>
<div id="copy">
<p>Copywright</p>
</div>
</footer>
</body>
</html>
CSS:
/* HEADER */
* {
margin:0;
padding:0;
}
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
/* END OF HEADER */
/* START NAV MENU */
nav {
background-color:#333333;
height:40px;
width:100%;
float:left;
position: relative;
}
nav ul {
font-family: Sonoma, Arial;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
position: relative;
float: left;
clear: left;
left: 50%;
}
nav ul li {
float: left;
position: relative;
display: block;
right:50%;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
background: #666666;
color: #ffffff;
padding: 5px 20px 3px 15px;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
border-right: 3px solid black;
border-left: 3px solid black;
border-top: 1px solid black;
}
nav ul li a:hover {
background: #999999;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
font-size: 11px;
}
nav li:hover a {
background: #534635;
height:30px; /* Height of lower-level nav items is shorter than main level */
}
nav li:hover li a:hover {
background: #999999;
}
nav ul li ul li a {
text-align:left;
}
/* END NAV MENU */
/* WRAPPER */
#wrapper {
width:100%;
height:600px;
background-color:#CCCCCC;
margin-left:auto;
margin-right:auto;
border-left:1px solid black;
border-right:1px solid black;
}
#content {
width:85%;
height:100%;
float:right;
background-color:#999999;
}
#left_side {
width:15%;
height:100%;
float:left;
background-color:#333333
}
/* END WRAPPER */
/* FOOTER */
footer {
width:100%;
height:170px;
background-color:#e7e7e7;
border-top:1px solid black;
}
#footer_center {
width:900px;
height:145px;
margin-left:auto;
margin-right:auto;
border-bottom:1px dotted #333;
}
#social_links {
width:435px;
height:100%;
float:left;
border-right:1px dotted #333;
}
#site_map {
width:435px;
height:100%;
float:right;
border-left:1px dotted #333;
}
/* END FOOTER */
You can achieve this by making classes.
.header{
width:100%;
height:20%;
float:left;
text-align:center
}
.logo{
width:80%;
height:100%;
}
.upperlogo{
background:url('path of the upper logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.lowerlogo{
background:url('path of the lower logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.social-icons{
width:20%;
height:100%;
float:right;
}
In your HTML:
<header class="header">
<div class="logo">
<div class="upperlogo"></div>
<div class="lowerlogo"></div>
</div>
<div class="social-icon">
....
</div>
</div>
Adjust the height & width to suit your images. Loading images through CSS is always the better-elegant way.
You need to add 2 images, some texts, and social networking buttons.
<header>
<img id="img1" src="" />
<img id="img2" src="" />
<div id="text">
<span id="title">GARY MANN LLC</span>
<span id="description">Residential Contractor</span>
</div>
<div id="social">
</div>
</header>
CSS:
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
#img1
{
float:left;
width:100px;
height:100px;
}
#img2
{
float:left;
width:100px;
height:100px;
margin-left:5px; //If you want some space between them
}
#text
{
float:left;
margin-left:10px;
}
#title
{
font-weight:20px;
float:left;
}
#description
{
font-weight:10px;
float:left;
clear:both;
}
#social
{
float:right;
}
Check this http://jsfiddle.net/5KRbh/
There are several ways. If you cannot change the html, try the :before selector.
header {
position:relative;
background: url(image.gif) no-repeat top left;
padding-left:200px;
}
header:before {
content:url(image.gif);
top: 0;
left: 100px;
position: absolute;
z-index: -1;
}