CSS - Cannot Transform Css Vertical Navbar Into Horizontal

Ok I guess this is a pretty tough for someone who knows layout using tables very well, but is pretty much clueless doing layout with css.

I have a graphic header that needs to have a width of 100% and a height 90px.. It is made from an image that is split into 3 sections. The left slice is the logo fixed width 204px. The middle slice is really just background: #10301B and the right side is 185px. So far I have this and it seems to work ok...

CSS:
#headcontainer {
position:absolute;
width: 100%;
height: 90px;
background-color: #10301B;
margin: 0;
padding: 0;
top: 0px;
}

#headleft {
float: left;
position:absolute;
width: 204px;
left: 0px;
}

#headright {
position:absolute;
width: 185px;
right: 0px;
float: right;
margin: 0;
}

HTML
<div id="headcontainer">
<div id="headleft"><img src="header_left.jpg">
</div>
<div id="headright"><img src="header_right.jpg">
</div>
</div>

The problem for me now is that I want a horizontal navbar that resizes like the header above it and I dont know how to do this lol....

lets call the source image navbar.jpg and it is 29px in height. Where do I go from here?? If I call what I have (the resizable header) row 1... then the navbar is row 2... and I dont know how to start row 2 .

Ive attached a jpeg of what the layout needs to look like.

thanks in advance....any help is greatly aprreciated !!

my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering.

placement:
well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure???

Code:

#navbar {
	text-align:right;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	padding-right: 8px;
	margin-top:-12;
	height:31;
}

#navbar ul {
	margin-right: -0.3em;
	height:31px;
	position:relative;
	bottom:-2px;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
	margin-left: 0.3em;
	margin-right: 0.3em;
	position:relative;
	vertical-align:middle;
}

#navbar ul li a {
	padding-top:11px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li div {
	position:relative;
	
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	margin: 0;
}

vertical centering:
i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this...

.......................................
. .
. texttexttexttexttext.
.image texttexttexttexttext.
.----- texttexttexttexttext.
. .
.......................................
so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc.

i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this.

http://www.viportals.com/

EDIT:

DID IT ON MY OWN!!! THATS A FIRST!!!

Code:

#navbar {
	text-align:center;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	margin-top:-15px;
	height:31px;
	line-height:31px;
	margin-left:0;
	margin-right:0;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
}

#navbar ul li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 4px;
	padding-bottom: 4px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	vertical-align:	middle;
}

now i have one QUESTION:
how do i get all the buttons to align center?????????? they all stay to the right

oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well.

Hi all,

I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7.

The li tag css is

Code:

li{
 	background:url('../images/li_bg.gif') repeat-x #ff0000;
 	display:inline;
 	padding:0 5px 0 5px;
 	margin:0 2px 0 0;
 }

List html is:

Code:

<ul>
	<li><a href="member.php">Home</a></li>
	<li><a href="profile.php">Profile</a></li>
	<li><a href="help.php">Help</a></li>
	<li><a href="logout.php">Logout</a></li>
</ul>

I reset margin and padding for all other tags in a general css file.

The image is a 1px width gradient.

Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin.

Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space.

Have seen plenty of navbar tutorials but not with margin between list elements.

Any help is much appreciated...

PHP Code:
echo "<div class=\"tbody2\">";
echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>";
echo "</div>"; 





Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css?

Hi,

I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it.

In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content.

I did some research on the internet and I managed to achieve the following:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
div#mbBackground{
	display:block;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100% !important;
	height: 100% !important;
	margin: 0 auto;
	z-index: 2;
	background-color: #c00;
}

div#mbBackground div#mbWindow{
	position:fixed;
	top: 40%;
	left: 40%;
	z-index: 2;
	margin: 0 auto !important;
	margin-left: 40%;
	margin-top: 40%;
	height: 200px;
	width: 200px;
	background-color: #fff;
	color: #000000;
}
</style>

    </head>
<body>
<!-- start: message box -->
<div id="mbBackground">
	<div id="mbWindow">
		Please Wait
	</div>
</div>
<!-- end: message box -->
</body>
</html>

However with the above code, innerDiv does not re-position it-self correctly based on its content.

Is what I need possible?

Regards,
Sim085

Hello everyone,

I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain:

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 name="robots" content="ALL, INDEX, FOLLOW" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Title</title>
    <style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.d1 {
	width: 1px;
	height: 1px;
	position: absolute;
	left: 50%;
	top: 50%;
}
.d2 {
	width: 700px;
	height: 300px;
	background-color: black;
	position: relative;
	left: -350px;
	top: -150px;
}
	</style>
</head>
<body>

<div class="d1"><div class="d2"></div></div>

</body>
</html>

If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7.

see he http://www.christiancouriernewspaper.com/blogbase/contactpage.php

What I want is for 7 fields (Name-State) on the Left just how they are
Then I want the remaining fields (Country- the spam question) on the right

I would like to have it so it all fits on one page without having to scroll

any ideas/suggestions?

the .css file is below

Code:

/*
   ----------------------------------------------------------------
   GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
   ----------------------------------------------------------------
   To use for testing, this stylesheet must be named default.css
*/

/* === form div and elements ======================================= */

#form-div { 
  font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  width : 70%;
  margin : auto;
  color : #FF8C00 ;
  line-height : 1.2em;
}

#form-div p.form-footer {
  margin : -35px 2px 20px 13px;
 }

#form-div p.form-footer a { 
  color : #003366; 
}

#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  background-color : #eee; 
}


/* === form div link styles ======================================== */

#form-div a { 
  color : #FF6600; 
}
  
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div a:focus, #form-div a:active { 
  background-color : #eee; 
}


/* === success and error message/results box ======================= */

#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #fff;
  /* color : #000; (lite colors option - uncomment to use) */
  padding : 1px 4px; 
  border : 1px solid #000; 
  background-color : #003366;
  /* background-color : #bfccd9; (lite colors option - uncomment to use) */
  margin : 10px 3px;
  text-align : center;
}

#form-div p.error { 
  background-color : #bb0000; 
  /* background-color : #edbaba; (lite colors option - uncomment to use) */
}

#form-div p.error a, #form-div p.success a {
  color : #ffff7f;
}

#form-div p.center {
  text-align : center;
  background-color : #edbaba;
  color : #000;
  margin-top : -3px;
  padding : 0px 4px; 
}

#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  color : #eee;
  background-color : #bb0000; 
}

#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  background-color : #003366; 
}


/* === structural form elements ==================================== */

form#gbcf-form { }

fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  border : 1px solid #eee;
  padding : 5px;
}


/* === textural form elements ====================================== */

#form-div legend { 
  font-weight : bold;
}

#form-div legend span { }

legend.main-legend { 
  color : #777;
  font-size : 100%;
}

legend.req-legend,
legend.opt-legend { 
  color : #777;
font-size : 60%;
}

legend.main-legend span { }
legend.main-legend { }

legend.req-legend span { }
legend.req-legend {
  margin-left : -2px;
}

legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}

label.req-label, label.opt-label {
  color : #FF6600;
font-size : 60%;
}

label.opt-label.check {
  float : right;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}

label.opt-label.main-label {
  margin : 0 2px;
  font-weight : bold;
  font-size : 75%; 
}

label.opt-label.main-label span {
  font-weight : normal;
  color : #FF6600;
font-sze : 60%;
}

label.opt-label.main-label span.req, label span.req  {
  font-weight : bold;
  color : #c70000;
}

label.req-label.explain {
  color : #666;
  font-size : .8em;
}

label.req-label.explain:hover {
  color : #000;
}

/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/

input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
  border-bottom : 0;
  margin-bottom : 0;
  padding-bottom : 2px;
  border-bottom : 1px dotted #bbb;
}

input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
  border-top : 0;
  margin-top : 0;
  padding-top : 2px;
  border-top : 1px dotted #bbb;
}

input.checkbox {
  border : 1px solid #999;
  width : .9em;
  height :.9em;
  padding : 0;
  margin : 0;
  cursor : pointer;
}

input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px solid #666;
}

input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  border : 1px solid #999;
  background-color : #fffffe;
  cursor : text;
  padding : 1px 2px;
}

select.select {
  padding : 1px 0;
}

input.text-short {
  width : 75px;
}

input.text-med, select.select {
  width : 150px;
}

input.text-long {
  width : 175px;
}

textarea.textarea {
  width : 220px;
  height : 100px;
}

select.select, select.select option {
  cursor : pointer;
}

input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  border : 1px solid #666;
  background-color : #ffe;
}

input.button { 
  font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  font-weight : bold;
  margin-top : 8px;
  padding : 1px 10px;
  cursor : pointer;
  float : right;
  clear : both;
  color : #003366;
}

input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #333;
}

/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
  border : 1px solid #666;
}


/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */

thanks ahead of time!!!

This might be a dumb question ... but here it is. I have a red background on my page and a simple table with one cell. I applied, via CSS, a 5 px border in white (border: 5px #fff solid and I want the bottom border to be black (border-bottom: 5px #000 solid but I didn't expected that result : the bottom border gets angular delimitation on both sides (see the link below).


Sample of the table

Here is the code used;

CSS
Code:

<style>

body
{
margin: 0;
padding: 0;
}

div.main
{
background-color: red;
height: 100%;
width: 100%;
}

.maintable
{
border: 5px #fff solid;
border-bottom: 5px #000 solid;
}

</style>

HTML
Code:

<body>
<div class='main'>

<br /><br />
<center>
<table border='0' cellspacing='0' cellpadding='0' class='maintable'>
	<tr>
		<td>Cell #1</td>
	</tr>
</table>
</center>

</div>
</body>

What I want, is a clean table that, if the border-bottom is declared AFTER the border statement, it will color ALL the bottom white to black, and if border-bottom is declared BEFORE the border statement, it will color the bottom border black except both sides (left and right) that will remain white.

I don't want angular sides like the one in the link, I want horizontal or vertical sides only, is that possible?

Thanks a lot.

hi all,

need help to change this from vertical to horizontal menu.

code:
<html>

<head>
<title>Test</title>


<script language="JavaScript" type="text/javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;


</script>


<style type="text/css">


body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: red; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: green; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>

</head>

<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>

any help would be appreciated! Thanks!!

We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html
Thanks -
Anthony

This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE.

I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action:

http://www.forma3.com/stuff/css/index-v1.2.html
http://www.forma3.com/stuff/css/css/index-v1.2.css

I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error.

Hello,

If you visit the page http://tombraiders.net/katie/alison/services.html

User: letme
Pass: in

I'm trying to get the links (in the main body, called "left_side" in the CSS) to do an uppercase transform when rolled over.

Currently, when you roll over Facials (the only link I have right now) the colour changes, but it doesn't change to uppercase.

In the CSS file, located at http://www.tombraiders.net/katie/alison/style.css the bit of code for this is:

Code:

#left_side a{
font-weight: bold;
text-decoration: underline;
}


#left_side: a:hover {
COLOR: #667D8E; 
text-transform: uppercase;
}

I'm not sure why it's not working. Any help would be appreciated - thanks

Is it possible to do this using CSS?
See attachment! Thanks!

I'm trying to get all the text lowercase on a page (client's wishes, not mine)

I thought it was working just fine until I tried IE6 on a PC.

I have a "text-transform: lowercase" in the body section of my css file.

Visit this URL to see what I mean: http://matthiaslot.com/calendar

On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized...

Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks.

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.