I have this html code
<div id="navbar">
<ul>
<li>Page1</li>
<li>page2</li>
<li id="NavItem">
page3
<div id="PopOver">Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here</div>
</li>
<li>page4</li>
</ul>
</div>
<div id="banners">
<div class="wrap">
<div class="left"><img src="http://www.mountainecho.bizland.com/banex1.jpg"></div>
<div class="right"><img src="http://www.mountainecho.bizland.com/banex1.jpg"</div>
</div>
</div>
And CSS code
#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#NavItem:hover #PopOver {display:block}
#banners { padding-top: 25px; padding-bottom: 25px; position: relative; }
.wrap { width: 1000px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }
The problem :
In many of cases the nav bar will disappear under the other div
For example i have added "#banners" div and i think the problem because of "position: relative;"
But as i said "#banners" div is just for the example and if i need to fix this, i should in #navbar #NavItem:hover #PopOver
Any idea please ?
Thank you.
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
z-index:1;
}
Set z-index:2; or greater in #PopOver
Set a z-index value on the #navbar item. http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I have a little bit confusion, i want to put img and ul tag in header and i put it like this:
HTML
<div class="header">
<div class="container">
<ul>
<li> Help </li>
<li> About Us </li>
</ul>
<div class="img01">
<img src="images/vfp logo.png" alt="LOGO" height="127" width="177">
</div><!-- .img01 -->
</div><!-- .container -->
</div><!-- .header -->
CSS
.header{
height: 135px;
background-color: #CCC;
border-bottom: 2px solid #000;
position:relative;
}
.header a{
color:#000;
font-size: 25px;
font-weight:bold;
text-decoration:none;
float:right;
padding: 14px 10px;
position:relative; top:40; right:40;
margin: 0px 30px 0px 0px;
}
.header li {
display: inline;
}
.header img01{
text-align:left;
}
The problem is I have adjust ul and li tags, and they are fine for my page, but the img can't move.. and don't know where should i put padding and margin for img?
Your CSS as it is now is not valid.
I think you probably want this:
.header img{
text-align:left;
}
Or, if you are trying to style a specific img that doesn't have an ID:
.header img:nth-of-type(1){
text-align:left;
}
However, if your img tag has an ID, you can just specify it:
.header #someID{
text-align:left;
}
EDIT
Based on your updated comment, you are trying to style a class named img01, which looks like this:
.header .img01 {
text-align:left;
}
You can also style the img specifically:
.header .img01>img {
text-align:left;
}
Try this:
.header{
height: 135px;
background-color: #CCC;
border-bottom: 2px solid #000;
position:relative;
}
.header > a{
color:#000;
font-size: 25px;
font-weight:bold;
text-decoration:none;
float:right;
padding: 14px 10px;
position:relative; top:40; right:40;
margin: 0px 30px 0px 0px;
}
.header > li {
display: inline;
}
.header > ul {
}
.header > img{
text-align:left;
padding: 1em;
margin: 1em;
}
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 8 years ago.
Improve this question
First attempt on doing a website after a online course on HTML and CSS. I'm struggling with the horizontal menu.
I have three elements in the "header": img1; img2; ul/li elements
I want to make them stick together so i have a logo on the left, a triangule in the middle and the menu on the righ, all stick together, with no spaces beetween them and centered.
Can you help me out ?!
Here's the CSS:
* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
float: left
}
#logo img {
display:inline-block;
width: 300px;
height: 50px;
}
#triangulo {
display:inline-block;
}
#triangulo img {
display:inline-block;
width: 50px;
height: 50px;
}
#menu {
display:inline-block;
border: 1px solid pink;
float: right
}
#menu li {
display: inline-block;
text-color: white;
font-weight: bold;
font-family: Arial;
}
Thank you so much for the patience
edit: html
<div id="header">
<div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
<div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50 /></div>
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>
edit2: fiddle link i want the 3 elements sticked toghther with no spaces between them and make it all the same row, with enough space to li/ul elements
Check thIS FIDDLE :DEMO
1) I have added a wrapper for the header and given it width and margin:auto , so that the menu is centered to the width (since you wanted the menu to be centered.)
2) and all the menu's are in a single line with equal spacing , this is done by applying display:inline-block;
HTML:
<div id="header-wrapper">
<div id="header">
<div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
<div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50 /></div>
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>
</div>
CSS:
#header-wrapper{
width:800px;
margin:0 auto;
}
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
display:inline-block;
}
#triangulo {
display:inline-block;
}
#menu {
display:inline-block;
border: 1px solid pink;
height: 50px;
width: 400px;
}
#menu li {
display: inline-block;
color: white;
font-weight: bold;
font-family: Arial;
}
Let me know if this is what you wanted.
There are many problem with your CSS Code. For example not wisely use float:left and float:right and second thing is there is no such property text-color: white; it should be color: white;.
Have a look at DEMO first . this is achieve by using display:inline-block;
CSS Code:
ul{margin:0; padding:0; vertical-align:top; list-style-type:none;}
#header {
white-space:nowrap;
border:1px solid #c6c6c6;
}
#logo {
display:inline-block;
}
#triangulo {
display:inline-block;
}
#menu {
display:inline-block;
border: 1px solid pink;
}
#menu ul li ,#menu ul li a
{
color: black;
font-weight: bold;
font-family: Arial;
display:inline-block;
text-decoration:none;
}
You need to float all of those inline divs left.
#header {
border: 1px solid blue;
height: 60px;
margin:0 auto 0 auto;
}
#logo {
float: left;
}
#triangulo {
display:inline-block;
float:left;
}
#menu {
display:inline-block;
border: 1px solid pink;
float:left;
height: 50px;
width: 400px;
}
#menu li {
display: inline-block;
color: white;
font-weight: bold;
font-family: Arial;
}
This should do it.
<style>
* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
display:inline-block;
padding:0px;
margin:0px;
width: 300px;
height: 50px;
float:left;
}
#triangulo {
display:inline-block;
width: 50px;
height: 50px;
padding:0px;
margin:0px;
float:left;
}
#menu {
display:inline-block;
border: 1px solid pink;
float:left;
}
#menu ul {
float:left;
padding:0px;
margin:0px
}
#menu li {
display: inline-block;
text-color: white;
font-weight: bold;
font-family: Arial;
}
</style>
<div id="header">
<img id="logo" src="images/Olympic-logo.png" width=300 height=50 />
<img id="triangulo" src="images/Triangle(shape).jpg" width=50 height=50 >
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
I'm having trouble with centering my full-width navbar with my fixed content area. The ul changes with browser or resolution.
here is a fiddle with my problem:
http://jsfiddle.net/fwyNy/
subject site
css:
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
}
and here is the html:
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
You should give the inner ul a position:relative, a width and then use margin: 0 auto
position:relative;
margin:0 auto;
width:980px; (for example)
http://jsfiddle.net/fwyNy/2/
(stretch the space of the 'result')
try
http://jsfiddle.net/Xxm76/34/
.lContent {width: 200px; border: 2px solid #000; border-right: none; float: right; position: relative;}
.rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}
it d be cross-browser stable ??
Here is a basic example of how I would do it:
<div id="wrapper">
<div id="outer">
<div id="nav">
<ul>
<li>Free Ground </li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>555-5555</li>
</ul>
</div>
</div>
</div>
And the css:
#wrapper{
height: 5em;
background: #000090;
padding-top: 2em;
}
#outer{
width: 100%;
height: 3em;
background: #000;
}
#nav{
height: 3em;
background: #ccc;
width: 70%;
margin: 0 auto;
float: right;
}
#nav>ul>li{
width: auto;
list-style: none;
display: inline-block;
margin: 0 0 0 1em;
}
Fiddle: http://jsfiddle.net/fqTwN/
I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?
Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.
If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.
<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>
float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}
Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}
Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.
DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO
Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>
Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.