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.
Related
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
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;
}
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
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.
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.