|
CSS - Alignment In Firefox
Hello,
I have a question about alignment in firefox. The menu i have has some space while it needed to reach the top, like it does in IE. The page you can see on: http://217.115.203.132/dcvtest/ I hope anyone has a solution for me. Thanks in advance. Tim Similar TutorialsHello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness. I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left. I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS. As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here. The code is below. Please let me know what I'm doing wrong! Code:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
<body>
<div id="container">
<div id="navbar">
<div class="navspacer">
<a href=""></a></div>
<div class="nav1">
<a href="plans.html"></a></div>
<div class="nav2">
<a href="phones.html"></a></div>
<div class="nav3">
<a href="broadband.html"></a></div>
<div class="nav4">
<a href="index.html"></a></div>
<div class="nav5">
<a href="services.html"></a></div>
<div class="nav6">
<a href="accessories.html"></a></div>
<div class="nav7">
<a href="locations.html"></a></div>
<div class="display">
<div class="presentation">
<div class="columnzone">
<div class="column1">
<div class="columncontent">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
</div>
<div class="column2">
<div class="columncontent">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
<div class="column3">
<div class="columncontent">
<?php
$a = new Area('Column3');
$a->display($c);
?>
</div>
</div>
</div>
</div>
<div id="bottomnav">
<div class="bnav1">
<a href="contactus.html"></a></div>
<div class="bnav2">
<a href="feedback.html"></a></div>
<div class="bnav3">
<a href="employment.html"></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<?php $this->inc('elements/footer.php'); ?>
</div>
</body>
And the CSS: Code: /* CSS Document */
body {
font:12px Trebuchet MS, Tahoma, Arial;
color:#000000;
background:url(/images/bg.jpg) repeat;
}
#container {
margin:0 auto;
width:1050px;
bottom:0;
}
/* NavBar */
#navbar {
width: 928px;
height: 90px;
position:absolute;
padding-left:50px;
top:0;
}
#navbar li {
list-style:none;
display:inline;
}
.navspacer a {
display:inline;
float:left;
width: 20px;
height: 90px;
background:url(/images/nav00.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a {
display:inline;
float:left;
width: 132px;
height: 90px;
background:url(/images/nav01.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a:hover {
background:url(/images/nav08.png) no-repeat;
}
.nav2 a {
display:inline;
float:left;
width: 127px;
height: 90px;
background:url(/images/nav02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav2 a:hover {
background:url(/images/nav09.png) no-repeat;
}
.nav3 a {
display:inline;
float:left;
width: 139px;
height: 90px;
background:url(/images/nav03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav3 a:hover {
background:url(/images/nav10.png) no-repeat;
}
.nav4 a {
display:inline;
float:left;
width: 114px;
height: 90px;
background:url(/images/nav04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav4 a:hover {
background:url(/images/nav04.png) no-repeat;
}
.nav5 a {
display:inline;
float:left;
width: 126px;
height: 90px;
background:url(/images/nav05.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav5 a:hover {
background:url(/images/nav12.png) no-repeat;
}
.nav6 a {
display:inline;
float:left;
width: 129px;
height: 90px;
background:url(/images/nav06.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav6 a:hover {
background:url(/images/nav13.png) no-repeat;
}
.nav7 a {
display:inline;
float:left;
width: 141px;
height: 90px;
background:url(/images/nav07.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav7 a:hover {
background:url(/images/nav14.png) no-repeat;
}
/* NavBar End */
/* Central Display Area */
.display {
display:block;
height:475px;
left: 74Px;
position: static ;
width:950px;
background:url(/images/display.png) top no-repeat;
}
/* Central Display Area */
/* Presentation Area */
.presentation {
display:block;
height:466px;
position: absolute;
left:71px;
width:908px;
top:421px;
background:url(/images/presentation01.png) top no-repeat;
}
.columnzone {
margin-top:-35px;
padding-top:52px;
position:relative;
z-index:0;
}
.columncontent {
padding: 18px 0px 0px 0px;
}
.column1 {
width:259px;
float:left;
padding: 0px 15px 10px 20px;
}
.column2 {
width:303px;
float:left;
padding: 0px 10px 10px 9px;
}
.column3 {
width:259px;
float:left;
padding: 0px 10px 10px 15px;
}
/* Presentation Area End */
/* Bottom Nav */
#bottomnav {
display:block;
width: 928px;
height: 90px;
position:absolute;
margin-top:887px;
margin-left:21px;
}
#bottomnav li {
list-style:none;
display:inline;
}
.bnav1 a {
display:inline;
float:left;
width: 326px;
height: 37px;
background:url(/images/presentation02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav1 a:hover {
background:url(/images/presentation05.png) no-repeat;
}
.bnav2 a {
display:inline;
float:left;
width: 250px;
height: 37px;
background:url(/images/presentation03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav2 a:hover {
background:url(/images/presentation06.png) no-repeat;
}
.bnav3 a {
display:inline;
float:left;
width: 332px;
height: 37px;
background:url(/images/presentation04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav3 a:hover {
background:url(/images/presentation07.png) no-repeat;
}
@-moz-document url-prefix() {
#bottomnav {
display: inline-block;
position:absolute;
width: 928px;
height: 90px;
margin-left:0px;
padding:0 0 0 0;
}
/* Bottom Nav End */
.footer {
background:url(/images/footer.png) no-repeat;
height:60px;
text-align:center;
color:#fefaca;
padding-top:18px;
margin-top: -500px;
margin-bottom:20px;
position:relative;
z-index:2;
}
ok when you take a look at http://www.mostardesigns.com/razorsedge/ you can clearly see what the alignment problem is. Here is the code below: HTML: 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=iso-8859-1" />
<title>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
<table width="898" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
<td colspan="6" class="border_top"></td>
<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="bg_main">
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg_menu"><div class="bg_menu_left"> </div></td>
<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
<td class="bg_menu"><div class="bg_menu_right"> </div></td>
</tr>
</table>
</td>
<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="border_bottom"></td>
<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
</tr>
</table>
</center>
</body>
</html>
CSS: Code: /* BEGIN GENERAL SETTINGS */
body {
background-color:#B0D2F4;
background-image:url(../images/body_bg.jpg);
background-position:top;
background-repeat:repeat-x;
margin:0px;
text-align:center;
}
body, td, div {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
}
/* BEGIN TD SETTINGS */
td.border_top {
background-image:url(../images/menu_4.jpg);
background-repeat:repeat-x;
}
td.border_left {
width:30px;
background-image:url(../images/border_left_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_right {
width:30px;
background-image:url(../images/border_right_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_bottom {
height:30px;
background-image:url(../images/bottom_2.jpg);
background-repeat:repeat-x;
}
td.bg_main {
background-color:#EFEFEF;
padding:3px;
vertical-align:top;
}
td.bg_menu {
background-color:#829CB5;
vertical-align:top;
padding:0px;
width:206px;
}
td.bg_center {
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
vertical-align:top;
width:420px;
}
/* BEGIN DIV SETTINGS */
div.bg_menu_left {
background-image:url(../images/menu_left_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
div.bg_menu_right {
background-image:url(../images/menu_right_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
Code:
<?xml version="1.0" encoding="UTF-16"?>
<!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>
<title>Tableless structure</title>
<style type="text/css">
<!--
* {
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0px;
padding: 0px;
margin-top: 40px;
}
#head {
background: LightGreen;
width: 100%;
height: 15%;
}
#menu {
background: Pink;
float: left;
width: 20%;
height: 80%;
}
#body {
background: LightBlue;
float: right;
width: 80%;
height: 80%;
}
#foot {
background: Silver;
clear: both;
width: 100%;
height: 5%;
}
-->
</style>
</head>
<body>
<div id="head">Header</div>
<div id="menu">Menu</div>
<div id="body">Body</div>
<div id="foot">Footer</div>
</body>
</html>
This code works fine on Firefox by centering horitzontally the page but in IE7 stays left aligned. Can you help? Thank you! Running here I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV. Visually, I am attempting this: PHP Code: ================================================================= User: John Doe Main Menu :: Logout ================================================================= To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content. I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that. The CSS: PHP Code: #loginbar { height: 14px; font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; background: #285064; margin: 0; padding: 3px 3px 0px 3px; } #logout { float: right; display: inline; } .loglink { font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; } And the markup: Code: <div id="loginbar" align="left"> User: '.$_SESSION['fullname'].' <div id="logout" align="right"> <a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a> </div></div> This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.) Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point Sounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx I can't get the Sidebar and Content divs to line up with each other. I tried floating sidebar left and content right but that only made it worse. What am I missing? http://ror.twisted-delusions.net/template/brc.html http://ror.twisted-delusions.net/template/style2.css Actually, I just realized I was trying to float and position relatively. But when I removed the positioning and just used floats it would not stretch my container div, howcome? I added clear all but that didn't do anything. http://ror.twisted-delusions.net/template/brc2.html http://ror.twisted-delusions.net/template/style3.css -------------------------------------- OK, NVM, I needed a div below the floats to clear them >.< you can close this topic. Hey, First off, please check out: identityrocket.com/website/index.php Notice the huge negative space just above the big orange button in the bottom left corner. I can't get rid of that space or seem to align it properly. I'm getting so frustrated because it is probably something small. Any help would be tremendously appreciated. Thanks, Ian. Hi, I'm having an issue getting my body background image to show a line that runs vertically down the sides. It shows in FF, but it doesn't show the left vertical line in IE or Chrome. The content is covering it up, and anytime I try making the overall width smaller in width, the content background color/area keeps aligning to the left and thus covering up my left border. Doh. Link: http://aries.addaction.net/~copeland/ Another issue is that there's a big gap separating the content from the footer. I think I've had this problem in the past, but unfortunately don't remember how to remedy the issue. I've tried and tried, but keep gettin' denied. Any thoughts on either of these obstacles? Thanks in advance. I love this forum. I am currently working on a site with a content section and a menu to the right of it. Im using CSS to do this and it seems to work in firefox, but not IE. What I mean is that the menu that is suppose to be to the right is all the way at the bottom and it should be right next to the content section. Do I have my index.php right? Example: <div id="content"> </div> </div id="rightMenu"> </div> I tried using float: left; on the rightMenu section, but it doesnt seem to work. Any hacks to make this work in IE? Hello, I have a question of aligning a layout using CSS. I have 3 blocks in the layout and I would like them to be on the same level (on the top). They are all contained within a container. So it's Container {imagebox, greeting, menu}. I could get the imagebox and greeting's top to match up but for some reason I just couldn't do the same for the menu block (except when I use negative margin, i.e. -32px) Here's my code: .pk #container { width: 60%; background: #FFFFFF; margin: 0px auto; border: 1px solid; margin-top: 50px; padding: 10% auto; } .pk #imagebox { width: 20%; margin: 10px 10px 10px 17%; padding: 0; background: #000000; color: #ffffff; float: left; } .pk #greeting { width: 20%; margin: 10px 10px 10px 38%; padding: 0; font-family:Calibri; font-size:36px; text-align:center; } .pk #menu { width: 20%; margin: 10px 10px 10px 59%; background: #000000; color: #ffffff; text-align:center; vertical-align:top; } I would really appreciate it if someone could guide me on this. I'm thinking of float, but doing that only messes the whole layout up. Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance! Code: <style type="text/css">
body
{
background-image:url('bg-1.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#FFF;
background-attachment:fixed;
}
* {
margin: 0px;
padding: 0px;
}
#wrapper {
height: 1300px;
width: 1000px;
margin:0px auto;
text-align:left;
}
#branding {
height: 228px;
width: 1000px;
}
#branding #logo {
height: 228px;
width: 1000px;
position: relative;
background-image:url('hooplogolarge.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#000000;
}
#siteNav {
height: 38px;
width: 1000px;
color: #FFF;
background-color: #000;
line-height: 38px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
float: none;
text-align: center;
word-spacing: normal;
font-size: 24px;
}
#mainContentWrapper {
float: none;
width: 1000px;
background-color: #FFF;
}
#mainContentWrapper #news {
float: left;
width: 265px;
height: 953px;
background-color:#FFF;
border: thin dashed #000;
padding: 10px;
}
#mainContentWrapper #mainContent {
float: left;
width: 488px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#mainContentWrapper #siteAds {
float: right;
width: 175px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#footer {
width: 1000px;
font-size: 9px;
color: #CCC;
text-align: center;
line-height: 35px;
background-color: #000;
clear: both;
}
</style>
|
|||||||