The div #leftcol won't go below the navigation panel. Dreamweaver shows it as if #leftcol and #navigation are the same div. I am an absolute newbie so any help is greatly appreciated. Here is the code:
<!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" />
<title>Untitled Document</title>
<style type="text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 800px;
margin: 0 auto;
border: 1px solid #FC3;
}
#header h1 {
float: right;
padding-right: 150px;
padding-top: 50px;
}
#navigation {
border-left: 1px solid #FC3;
border-right: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}
#navigation ul {
margin: 0;
}
#navigation ul li {
display:inline;
}
#navigation ul li a {
display: block;
padding: 5px;
text-decoration: none;
float: left;
}
#navigation ul li a:hover {
background-color: #cadb2b;
}
#navigation ul li a:visited {
background-color: #cadb2b;
}
#leftcol {
width: 200px;
background: #cadb2b;
border: 1px solid black;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="header" />
<h1>Some Title!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
<div id="leftcol">Content for id "leftcol" Goes Here</div>
</div>
</body>
</html>
Also, I didn't know how to position the <h1> next to the picture so I floated it to the right and then positioned it with padding. Is this the correct method for positioning the title next to the header? Thanks in advance. PS. As a new user, I had to remove two of the links in my navigation and my header picture, so don't mind if it looks weird.
Is this what you have in mind. I'm not entirely sure what it is you intend for, so if I'm wrong, see my comment under your question.
http://jsfiddle.net/9hqCK/1/
If you don't want leftcol to take up the entire width of the page, add the following property to #leftcol
width:250px;
Change the width to what suits you.
Related
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I'm having trouble repositioning the menu on this to a place of my liking. How would I be able to take the entire list and position it on the page where I would want it to be? Sorry for a simple question, I'm not very experienced.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<style>
body {
background-color: lightgrey;
}
.menu {
list-style: none;
font-family: "futura", sans-serif;
}
.menu li {
float: left;
border-left: 2px solid black;
padding-left: 10px;
margin-right: 10px;
}
a {
text-decoration: none;
}
a:link {
color: grey;
}
a:hover {
color: white;
}
a:visited {
color: darkgrey;
}
.menu li:first-child {
border: none;
}
div.title {
float: left;
font-family: "futura", sans-serif;
padding-left: 10px;
margin-right: 10px;
font-size: 36px;
}
</style>
</head>
<body>
<div class="title">Dan's Cupcakes</div>
<ul class="menu">
<li>Home</li>
<li>Cupcakes</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</body>
</html>
Where exactly do you want to place the menu ??
Anyways I 've edited something and provided you with the jsfiddle of it. See if it is the way you want it to appear.
You just have to change the margin values for the menu css.
.menu {
margin: top_position, right_position, bottom_position, left_position;
}
http://jsfiddle.net/DGjG9/
See that link and come to a decision
here's a link to learn about positioning elements with css.
http://www.w3schools.com/css/css_positioning.asp
There's several ways to do it. Depending where you want it to show on the screen, is how to determine which method to use.
The following code shows a pop up menu.
<!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" />
<title>position ul</title>
<style type="text/css">
html, body, div, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main {
position:relative;
width:950px;
height:30px;
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
border:2px solid #8c8b4b;
}
#main li {
width:92px;
height:30px;
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
width:400px;
border:2px solid #8c8b4b;
height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
color:white;
font-weight:bold;
}
li.menu2 div {
position:absolute;
margin-left:-999em;
padding-top:200px;
}
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
border:2px solid red;
height: 200px;
width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1">menu item1</li>
<li class="menu2">menu item2
<div>
<ul class="rounded-corner">
<li>submenu2 item1</li>
<li>submenu2 item2</li>
<li>submenu2 item3</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
The submenu is consisted of a ul entity reesides inside a div.
I would like to change that ul's position within its' ancestor: a div.
I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
Can anyone explain me please why i cannot make that ul repositioned inside its' div?
How can i make it move to other place within the div?
Attached is a screen shot of the present page which i'd like to change.
Thanks a lot !
you can add padding-top: 100px to your CSS
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
padding-top:100px;
}
take a look here if that's what you meant (and what I understood)
http://jsfiddle.net/9NqDd/
give this div
position:relative;
if adding
padding-top:100px;
won't work try
margin-top:100px;
instead.
I know this is a typical question but I cannot find the solution. My CSS drop down menu works fine everywhere but IE9. The drop down simply doesn't work in IE9. Any advice? Thank you.
Here is the menu HTML:
<div id="menu">
<ul>
<li><span>Needs Assessment</span>
<ul>
<li>History1</li>
<li>Team1</li>
<li>Offices1</li>
</ul>
</li>
<li><span>Design and Development</span>
<ul>
<li>History2</li>
<li>Team2</li>
<li>Offices2</li>
</ul>
</li>
<li><span>Prepare and Implement</span>
<ul>
<li>History3</li>
<li>Team3</li>
<li>Offices3</li>
</ul>
</li>
<li><span>Debrief and Measure</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
<li><span>Resources</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
</ul>
</div>
Here is my CSS for this menu:
#menu {
width: 942px;
height: 47px;
border: solid 0px #000;
}
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
}
#menu li ul {
position: absolute;
margin: 0px;
padding: 0px;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
color: #fff;
}
#menu li li a:hover {
color: #ccc;
}
#menu ul li a {
display: block;
width: 188px;
padding: 12px 0px 10px 0px;
background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
border: solid 0px black;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-align: center;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
border: solid 0px black;
}
#menu a:hover span {
color:#bbb;
}
As Sparky672 said, your HTML is hopelessly invalid. You should fix it.
However, to fix the specific problem you're having, all you need to do is add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, IE is in quirks mode.
Without seeing a demo, I have no idea if this will solve it, but you have a syntax error in your CSS. Missing the opening (.
This way always works for me...
background-image: url(http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png);
Edited as per comments and demo URL:
You have some serious HTML validation errors. (Edit #2: Originally, the very first listed error was a missing doctype which will throw IE in quirks mode.)
You have this in the top of your page...
<html>
<head>
<title>Debrief and Measure</title>
</head>
<body>
<html>
<head>
<title>Discover Simulation</title>
</head>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link href="/Laerdal/_LOCAL_CONTENT/usa/css/discoversimulation.css" rel="stylesheet" type="text/css">
<body>
Notice all the duplicate <html>, <body> and <head></head> tags.
Then at the bottom of your page...
</body>
</html>
<div align="center">
<div id="whitebox">
...snipped...
</div>
</body>
</html>
Notice the extraneous </body></html> tags.
As an aside: align="center" has been deprecated.
This is a follow-up to my last question. Thanks to "mu is too short" I can now demonstrate my problem in a fiddle.
I have the following code.
I want the code to show the list circles to the left of the text but to the right side of the .img DIV. This works in Firefox and in Opera but in IE they are positioned to the very far left. I can't understand why they are positioned differently in the two browsers. Help would be much appreciated.
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
Here is a fiddle
Demo 1
I did a couple of things based on my experience. Most importantly:
I have floated the UL towards left
I have zeroed out all margin/padding on the UL (except padding left so that the bullet stays there)
I have zeroed out all margin/padding on the LI
Note that different browsers have different defaults for margin/padding on UL and LI hence the normalization.
Demo 2
This is almost the same as above except UL is not floated, instead a left-margin is used.
My CSS isn't great, but I think you need something like this:
.fp1 .col ul { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
I can't explain why IE does nonsense like this, save for saying IE does this kind of thing all the time!
The solution is condintional comments.
These allow you to point different css at IE versions only: http://www.quirksmode.org/css/condcom.html
so
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
Would target all IE versions, just as
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Would target IE6 only .
so this should fix your problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style><!--
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
--></style>
<!--[if IE]>
<style><!--
ul li {
margin-left: 80px;
color: red;
}
--></style>
<![endif]-->
</head>
<body>
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
</body>
</html>