|
CSS - Struggling With Float For A Simple Layout - Help?
Hi all,
This is my first post here so go easy on me. Firstly, please look at this: h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address. Anyway, the top part is what I have now and the bottom part is what I'm trying to get to. Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left. I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here. ANY help would be much appreciated! Thanks, digitalformula Similar TutorialsI have looked at this a million times and now I've completely lost track... This is the layout in IE: as you can see, it looks perfectly fine, just like I wanted it to look...but then... this is how it looks like in Mozilla: The lay-out is all messed up..it seems like there is a fault in the code with the top left floater..because the right floater only begins at the same point the top left floater ends... I truly want this to look fine in both browsers...even though the most people use IE... (the page is at http://www.finedesigns.nl/portfolio/voorbeeld huisarts) this is the coding: body { background-color:#FFFFFF; text-align: center; } a { font-size:10px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#006666;} a:visited {color:#006666;} a:hover {color:#CC9900;} #container { background-color:#006666; margin-left: auto; margin-right: auto; text-align: left; width: 100%; margin: 10px auto; font-family:verdana; font-size:10px; color: #006666; line-height: 120%; } #Header { padding: 5px; height:100px; } #Left { float: left; width: 150px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Left2 { clear:left; float: left; width: 150px; height:210px; margin-right:5px; margin-left:5px; background-color:#CC9900; } #Right { float: right; width: 150px; height:450px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Content { background-color:#FFFFFF; height:450px; margin-left: 160px; margin-right: 160px; padding: 10px 10px 10px 10px; } #Footer { clear:both; background-color:#006666; padding: 0px; height:5px; } Hi, Is it possible to make the following "LEFT MENU" sits on left side and "RIGHT MENU" on right side without using "float" ? <div id="menu"> <div>LEFT MENU</div>'; <div>RIGHT MENU</div> </div> Thank you. I'm having trouble with a table layout I'm trying to convert to a float layout my attempt so far is as follows Code:
--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
</a>
</div>
<div class="#cls#">
<div class="boatLeft lfloat">
<strong>Boatname</strong>
</div>
<div>
<strong>#BOATNAME#</strong>
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
LOA
</div>
<div>
#loam#m / #loaft#' #val(loain)#"
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Builder
</div>
<div>
#MFGNAME#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Naval Architect
</div>
<div>
#hulldsnr#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Designer
</div>
<div>
#designer#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Decorator
</div>
<div>
#decorator#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Stylist
</div>
<div>
#stylist#
</div>
<div class="clear"></div>
</div>
<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--
in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats. Gary you should probably have somehting to say about that... the attachment show's how its supposed to look. The black boxes represent block level elements, not borders. Dave I am having some trouble using float to align containers on my page. Here is what it looks like. http://filebox.vt.edu/users/kfalcon...less_broken.JPG In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following: http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area. From the index.php page i am using javascript to load the roster.php page into the content area. Code:
<div id="main-nav">
<dl>
<dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
</dl>
</div>
<div id="content">
<h2>Main Page</h2>
</div>
The roster.php page looks like this: PHP Code: <div class="rostercontainer"> <?php // Go through all profiles while($profile = mysql_fetch_assoc($profiles)) { ?> <div class="profilecontainer"> <img src="image3.gif" class="floatLeft" width="150" height="115" alt="image 3" /> <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/> <?php echo $profile['active']; ?><br/> <?php echo $profile['status']; ?><br/> <?php echo $profile['ride']; ?><br/> <?php echo $profile['major']; ?><br/> <?php echo $profile['hometown']; ?><br/> <?php echo $profile['info']; ?><br/> <div class="editlink"> <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a> </div> </div> <?php } ?> </div> And here is my css file, ive only included the important parts. Code:
#page-container {
width: 760px;
margin: auto;
}
#content {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
background: blue;
border-top: 1px solid #efefef;
padding: 25px;
}
div.profilecontainer {
position: relative;
width: 325px;
height:200px;
margin: 10px;
padding: 5px;
background-color: #ffe;
border: 1px dashed black;
}
div#content div.rostercontainer {
background-color:red;
float : left;
}
I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this? Thanks for any help, Karl Hello all, first time poster here... I was working on a new site for an RP environment I gm using a table based layout. I ran into some problems and got fed up with it, So now for all the great reasons out there I decided to better learn CSS overnight and make the layout based on div tags and all that good stuff instead. After piling all my information into the page I've been having some funky stuff happen to the layout; the right most column moves down below the other two if the window takes up less than the 1000px width I've allotted. Does anyone know why and a way to fix this? Please feel free to rip on my usage of png-s or anything else you'd like to also Here's a temp link to the page on my site: louisjustmanDOTcom/prinz/newMOTD.html ...and a direct to my css file too: louisjustmanDOTcom/prinz/css/master.css Thanks a lot in advance! EDIT: Wow; all that time and it was a stupid mistake... extra closing div tag where i didn't need one. I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right. Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #0163CB;
}
#content{
width: 80%;
float:left;
}
then my divs are as follows:
<div id=navBar>
stuff
</div>
<div id=content>
more stuff
</div>
The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page. Thanks Dave Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. Hi, Here's my problem: css Code: Original - css Code <div style="width:69%; text-align:center; float:left;"> <div style="width:80%; min-height: 98px; border: black thin solid;"> BLEH </div> </div> <div style="width:30%; text-align:center; float:right;"> RIGHT </div> <div style="width:69%; text-align:center; float:left;"> The above code, should in theory make two "cells", one on the left and one on the right, side by side. Within the left one there should be another box, aligned centrally. This is fine in internet explorer, yet in Firefox & similar browsers it refuses to do this - I'm sure this is something very simple. Many thanks, Alan Hi, Small problem he http://www.salewhale.com/z.html The box with the "What would you like to do?" is as follows: Code: <div class="boxarea"> <div class="boxarea_left"><b>What would you like to do?</b></div> <div class="boxarea_right"><a href='3_changepass.php'>Change Password</a></div> </div> The CSS for this is: Code: .boxarea {
border: 1px solid #0000FF;
background-color: #F5F5F5;
padding: 2px 2px 2px 2px;
}
.boxarea_left {
width: 140px;
float: left;
}
.boxarea_right {
width: 300px;
}
The point is to have the left column (boxarea_left) as 140px, so that the text wraps to the next line. Does anyone have any idea why the border box doesn't really take account of the new line? It simply ignores the divs and has a basic one line height. Of course, if I put a spacer within the boxarea div, the problem will be solved - but this leaves a gap at the bottom of the box - which I dont want. Is there a simpe fix? Thanks very much! Hi really nw to using css just starting out today lol. So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas. Code:
<body>
<div id="level0">
<div id="level1">
<div id="topBar">This is the top navigation bar.</div>
<div id="advBar">
<div id="mod1">2323 frwef sdf</div>
<div id="mod2">s dfs dfsd fsd fsd f</div>
</div>
</div>
</div>
</body>
Code:
body {
margin:0px 0px 0 0px;
padding:0;
background:#FFF;
}
#level0 {
background:#FC0;
}
#level1 {
padding-left:9px;
padding-right:9px;
margin-left:300px;
margin-right:300px;
background:#FFF;
}
#main {
background:#CCC;
}
#topBar {
padding: 10px;
background:#FC0;
}
#advBar {
padding: 10px;
height: 90px;
background:#FFF3AC;
}
#mod1 {
border: 1px solid red;
float: left;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
#mod2 {
border: 1px solid red;
float: right;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
Okay I am trying my best to let go of HTML tables and move to the wonderful world of using CSS for layout. I continue to find that, although it may be an archaic way of doing things, most of the time using tables for layout is the quickest and most accurate way for me to get the job done. Please don't hate, because I want to become more knowledgeable at using CSS! So in my latest project I have a problem. I have a navigation bar that stretches always accross my page. In that navigation bar I have two primary things: on the left I have a menu section, and on the right I have a login section. In the past I would have easily implemented the layout with tables, using something like this... <table cellspacing="0" cellpadding="0" style="width:100%;"> <tr style="background-color: black;"> <td align="left">[stuff for my menu section]</td> <td align="right">[stuff for my login section]</td> </tr> </table> The end result would be a solid black navigation bar that would contain the stuff for the menu section on the left and the stuff for the login section on the right. Each would sit inside and flush against its respective side of the containing solid black navigation bar. Also, this navigation bar would automatically adjust its height to contain both sections, no matter how tall. Pretty simple stuff, right? So now I am trying my best to figure out how to do this with CSS. At this point I have only a very crude understanding of how CSS and divs work in layouts. I started out by making a container div... <div id="NavigationBar" style="background-color:black;"> </div> ...then I embedded a div for each section... <div id="NavigationBar" style="background-color:black;"> <div id="MenuSection"> [stuff for menu section] </div> <div id="LoginSection"> [stuff for login section] </div> </div> ...When I ran the page I quickly noticed the output was quite different than what I expected. It showed my black navigation bar, but it stacked the login section along the left side and just under the menu section. So after some reading I discovered I should be able to solve the problem by assigning 'float:left' to the menu section div and 'float:right' to the login section div. And so I did. While this did cause each to appear in the correct location (menu section on the left, login section on the right), it also had an undesirable effect. Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent. And so now, while I have a partial solution, I am still left wondering what I should do to continue on and solve this issue. What I really need is for each section to be *contained* within the parent div and also use its background color, while also aligning properly to the left or right sides of the parent div. In other words, I want the black background color of the navigation bar to be shown behind my menu and login sections. And if my menu should render at 40 pixels high, 300 pixels high...whatever, the containing parent div should adjust to contain it, just like an HTML table would. For me, setting 'height' values for the parent div (essentialy in the background) and then using 'float' styles is not a good solution. What if the menu is rendered using a different font and thus changes heights? And even more important, what if a user does not view the page in standard 96DPI mode? In either case the rendered heights of the menu and login sections could change. If I were using tables this would not be a problem; the table would simply adjust to the needed height, no matter what. How can I get the same effect when using CSS and divs? Need a bit of CSS guidance I would like somefeed back on what is a good way to structure a page template using CSS I would like the page content to be displayed 780 px width, Centered Header image at top 780 px wide Horzontal Nav below 780 px wide also 2 columns of content below footer at bottom Im sure this is a common layout as I have seen it on many sites. Im just not sure what the optimal way to set it up using divs. SEO being my primary concern Here is the layout: Code: <body> <div id="main"> <div id="header"> headet stuff here </div> <div id="nav"> the nav </div> <div class="content"> <div id="left_content"> left content </div> </cfif> <div id="right_content"> right </div> </div> <div id="footer"> footer </div> </div> </body> STYLE SHEET: Code: #main{
position: relative;
margin-left: auto;
margin-right: auto;
width: 780px;
}
#header {
position: relative;
width: 780px;
height: 100px;
margin: 0;
padding: 0;
background-color:#8787d5;
}
#nav {
position: relative;
width: 780px;
margin: 0;
padding: 0;
border-top: 1px solid #ffffff;
background-color:#8787d5;
background-image:url(../images/nav_bg.png);
}
.content {
position: relative;
top: 0px;
left: 0px;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
background-color:#e9e9f5;
}
#left_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
left: 5px;
top: 5px;
width: 325px;
padding: 0;
}
#right_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
top: 5px;
left:335px;
width: 440px;
padding: 0;
}
#footer {
position: relative;
padding: 20px 10px 10px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #993300;
text-align: center;
}
THe problem I am having is when I use relative position for left-content and right_content the right content is positioned to right of but at the bottom of the left_contetn div. I can get them to line up correctly using absolute positioning but then the content div that contains them and that also has the border and backgrond color does not expand vertically to to contain the left_content and right_content divs. any help is greatly appreciated thankya Hi, I'm trying to constuct what, in real terms, is a simplistic page layout using CSS-P. Maybe I'm being stupid - but here goes... I am trying to constuct a page as follows: header (viewport width) leftMenu (width 150px) content (as wide as necessary) - top aligned with top of leftMenu footer (viewport width) - underneath the "tallest" of "Left Menu" and "Content" Easy huh? But, as soon as any content is greater than [viewportWidth - 150] (150=width of leftMenu), the content (depending, of course, on the CSS implementation) either slips below the leftMenu, disappears altogether(?), or has the footer right underneath the header with everything else below. I could do this with a simple table construct in under a minute. So please - CSS gurus, can you advise me how to achieve this in CSS, as it seems impossible (10 hours+)? I thought CSS was supposed to make design easy; If I'm not missing something and CSS can't achieve this (common) basic layout - what hope is there? All comments truly appreciated, HEX. Quote: I just started working with CSS again, and I'm having problems coding my layout. The problem is he I'm testing on Firefox. div#wrapper is the problem. EDIT well, after playing with it some more, I have found out that this has no pattern to it at all, its pretty much just producing random results, so infinitely STUPID!!! Seriously. This is something that is so simple, and yet these idiots who come up with this crap make it so difficult. If you want to pad left and right, it shouldn't be this goddamn difficult. Sorry, I'm VERY pissed now, after working on something so basic for so long. I can only get a padding on the right for so far, and then it skips over to completely aligning to the right, while the left is so much farther over, even if it has smaller padding... what the hell. Heres the full code: index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Elemental Concepts</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="upperwrapper"> <div id="banner"></div> <div id="memberswrapper"> <div id="members"> </div> <div id="membersfooter"></div> </div> </div> </div> </body> style.css Code:
body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div#wrapper {
width: 700px;
margin: 0 auto;
padding: 0px 50px 0px 25px;
text-align: left;
background-image: url('mainbg.jpg');
height: 100%;
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background-image: url('banner.jpg');
}
div#memberswrapper {
float: right;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background-image: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
div#wrapper, is the main div, which has a background. I need the insides spaced about 15 px from the left, and 15 px from the right. But for whatever reason, it usually ends up spacing 25 px from the left, and 5 from the right, the more I play with the numbers though, to get the results I want, the more obscure it becomes... it just WILL NOT do what I want, and WILL NOT follow any logical pattern with how it display. Help is really appreciated. I am completely and utterly lost... EDIT 2: Still working on it, and no progress, except the background image keeps disappearing every time I even think about touching the background attribute! I'm about to say **** it, and use tables. This is ridiculous. I just opened up IE6, and it looked even more obscure than it does in Firefox. This makes no sense. I just read a few tutorials on div padding, doesn't mention anything about this. Maybe its the floats causing the problem... but I don't see why elements on the inside could stretch the containing element, if it has fixed size and padding, and that still doesn't explain the IE6 problem's, which I'm not even going to get into now... since I have probably confused you enough already. I seriously think I could write an entire HTML/ CSS parsing engine, in any language, in less time than it would take me to code this layout properly in HTML/ CSS. Ridiculous. Well, I got the top working in Firefox, instead of floating left and right, the banner and memberswrapper, I floated one left, and the other had a left-margin. Though, I am almost 100% sure, the text, and other divs below are not going to align properly, with the edges of the above [banner and memberswrapper]. I am also afraid to see what this looks like in IE6. style.css Code: body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div {
margin: 0;
padding: 0;
}
div#wrapper {
width: 725px;
margin: 0 auto;
padding: 0 25px 0 25px;
text-align: left;
background: url('mainbg.jpg');
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background: url('banner.jpg');
}
div#memberswrapper {
margin-left: 477px;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
Edit Again: Looks just as bad as it did before, in IE6. The background image repeats horizontally, which it should have absolutely no reason to do so, the width is 50 pixels less than the images width, and the padding on the left and the right, are each 25 pixels, accounting for the full image size... and yet the full image and then some is displayed. If screen shots would help, I can take some. Or if you want to see what an impossible layout to code looks like, I can send you a zip of everything. Theres 2 options left, tables or absolute positioning. I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. |
|||||||