|
CSS - Divs In Layout Lining Up???
I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code:
Basic layout defined by Code: <div class="menucolumn"> <!-- some content in my left hand column --> </div> <div class="maincolumn"> <!-- some content in my right hand column --> </div> Corresponding CSS: Code:
div.menucolumn{
float: left;
width: 200px;
margin-top: 20px;
}
div.maincolumn{
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
Form Fields: Code: <span class=\"formlabel\">Use MySQL (yes or no):</span> <input type=\"text\" name=\"usemysql\" class=\"formfield\"> CSS: Code: .formlabel, .formfield{
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
display: block;
width: 300px;
float: left;
margin-top: 5px;
}
.formlabel{
text-align: left;
width: 300px;
}
Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space? Similar TutorialsBig surprise, issue with IE. I have a layout I'm working on that is tableless. In FF the layout appears as it should, but in IE I'm getting a little bit of a gap between my header image and my nav images. The background (where the date is showing) is also appearing a little bit lower than the rest div contents. The site is Shallow Drop The CSS is: Code:
html, body {
background: url(../images/back.gif) #4a4949;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #d6d5d5;
height: 100%;
text-align: center;
}
a {
color: #d6d5d5;
font-weight: bold;
}
a:hover {
color: #faec0a;
}
#container {
width: 816px;
margin: 0 auto;
text-align: left;
background: url(../images/fill2.gif) repeat-y center;
}
#header {
width: 816px;
height: 118px;
}
#nav {
width: 816px;
height: 29px;
padding: 0px;
margin: 0px;
text-align: left;
vertical-align: top;
background: url(../images/date.gif) no-repeat right;
}
#nav-list {
float: left;
width: 80%;
height: 29px;
}
#nav a {
cursor:crosshair;
}
#date {
float: right;
vertical-align: bottom;
text-align: left;
width: 20%;
height: 29px;
padding-top: 7px;
}
#bod {
width: 780px;
height: auto;
margin: 0 auto;
padding: 5px;
}
HTML Code:
<div id="container">
<div id="header">
<img
src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/header.gif";?>"
alt="Shallow Drop" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="33,9,165,117" href="index.php" alt="Home" /></map>
</div>
<div id="nav">
<span id="nav-list">
<img src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/left_sun.gif";?>"
alt="Shallow Drop Madison, WI"
/>
...some more images...
</span>
<span id="date"><?php echo (strftime (_DATE_FORMAT_LC)); ?></span>
</div>
<div id="bod"><?php mosMainBody(); ?></div>
Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help. I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element. One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs. I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images Web Site: (sample dot funky-penguin dot com) CSS help garnered he (alistapart dot com/stories/practicalcss) My xhtml and css 2.0 all validate, so I don't think that is the problem. I hope I was specific enough. Thank you in advance for all of your assistance. I tried for hours to make the following divs positioned as shown in the following image. I will appreciate if someone will guide me through this. When I used float, position, display etc... things messed up one way or another. Code:
<div class="friendlisting">
<a href="#"><img src=".jpg" alt="xxxx" class="profile" /></a>
<div class="fullname"><a href="#">George Lexington</a></div>
<div class="hometown">Bruges, Belgium</div>
<div class="commonfriends">13 common friends</div>
<div class="addtofriends"><img src="images/icons/user_add.png" />Add to friend list</div>
<div class="sendmessage"><img src="images/icons/email_edit.png" />Send Message</div>
</div>
#content .friendlisting { min-height:40px; padding:5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { width:100px; }
#content .friendlisting .fullname { width: 100px; margin:10px; }
#content .friendlisting .hometown { width: 100px; color:#CCC; margin:10px; }
#content .friendlisting .commonfriends { width:100px; height:100%; background:#ffe996; }
#content .friendlisting .commonfriends:hover { background:#FEDF62; }
Very cool new method, definitely worth a look. http://somerandomdude.net/projects/webdev/divless/ Enjoy. hey, I'm still trying to learn the best css practices and I need some help setting this up. The page is kind of unique because the logo (HEADER) is bigger than the following content. all of the following components are in order and I need them to be centered HEADER height:216px; width: 1000px; LINK-BAR height:21px; width:961px; (this is the width of the rest of the page) BODY-CONTENT padding:50px; - COLUMN ONE - COLUMN TWO (width:231px LINK-BAR any help is very much appreciated, Thanks! This threads over with. I need to create the following layout using divs/css, but I can't figure out how to do it. Can anyone help me, please? Thanks, Gary Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <table cellspacing="0" cellpadding="0" border="0" width="760" height="100%"> <tr height="420"> <td width="600"></td> <td width="160" bgcolor="green"></td> </tr> <tr> <td width="600"></td> <td width="160" bgcolor="yellow" valign="bottom">This text is aligned to the bottom of the window, and moves up with the bottom of the window but only as far as the green block.</td> </tr> <tr height="20"> <td width="600"></td> <td width="160" bgcolor="yellow"></td> </tr> </table> A demo of this page is here , so you can see what it does. Many thanks, Gary I'm currently working on a new blog and am trying to make this layout http://danbeckett.co.uk/newl.gif, but as this is my first real foray into CSS I'm not having much luck. I know that for the curves I'll need to use images, but it's getting them inline, and finding a way to make the (slightly) light(er) blue to stretch across as with the border. Here's what I have so far: http://danbeckett.co.uk/blog.htm and the CSS: http://danbeckett.co.uk/blog.css It looks better in FF than IE, in IE it really is a mess. If anyone can help me with this I would really appreciate it, Thanks - Dan. Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong.
Code: <html> <head> <!--[if IE]> <style type="text/css"> #container div {display:inline;} #ul_top li {display:inline;} #header p {display:inline;} #main_content div {display:inline;} #recreation div {display:inline;} </style> <![endif]--> <style type="text/css"> body {padding:0px; margin: 20px 0px 0px 20px; } h1 {color:#990D0D; font-size: 20px; text-indent: 40px} #limiter {width: 1003px; } #ul_top {margin:0px; text-align:right; } #ul_top li {display:inline-block; zoom:1; padding: 0px 5px 0px 0px; } #ul_top li a {color:#000; text-decoration:none; font: veranda; font-size: 11px; } #ul_top li a:hover {color:#DE6800; text-decoration: none; font: veranda; font-size: 11px; } #container {border: solid #000 1px; background: #FFF url('background.jpg'); text-align:left; width: 1000px; height: 750px; } #header {width:1000px; height:303px; background:#yellow url('red_rock_header.jpg') no-repeat; } #header p {display:inline-block; zoom:1; font-size: 20px; } p.company_name:first-letter { color:#990D0D; font-size:40px; } #main_content div {display:inline-block; vertical-align:top; zoom:1;} #recreation {width:430px;} #recreation div {display:inline-block; vertical-align:top; zoom:1;} #text_holder{ border-right: dashed black 1px; padding:15px; width: 375px;} a.rec_links {color:#DE6800; font-size: 18px; } a.rec_links:hover {color:#000; font-size: 18px; } a.pic_links { display:block; position: relative; width: 200px; height: 160px; } #climbing {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('climbing.jpg') no-repeat; } #bicycling {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('bicycling.jpg') no-repeat; } #hiking {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('hiking.jpg') no-repeat; } #wildlife {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('wildlife.jpg') no-repeat; } p.discription {font-size: 12px; text-indent: 20px; } </style> </head> <body> <div id="limiter"> <ul id="ul_top"> <li><a class="mini_link" href="#">Contact us</a></li> <li><a class="mini_link" href="#">Area Map</a></li> <li><a class="mini_link" href="#">About us</a></li> </ul> <div id="container"> <div id="header"> <p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> </div> <div id="main_content"> <div id="text_holder"> <h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p> </div> <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div> <div id="recreation"> <div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> <div id="climbing"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> <div id="bicycling"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> <div id="hiking"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> <div id="wildlife"> <a href="#" class="pic_links"></a> </div> </div> </div> </div> </div> </body> </html>
I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div>
<div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
<img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
<div style="height:100%"> [div 2] Shows text on the right <br>
<br>
continues downwards no matter how much text appears<br>
<br>
<br>
<br>
<br>
<br>
Even down here [/div2] <br>
</div>
</div>
This works great in i.e. but not mozilla, anyone have any ideas? Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Hi All! I am hoping that someone might be able to help me out here. I am working on a page layout that consists of a header/logo then beneath that is five link nav bar and then below the content area. The header and content are fine and look great - but the nav bar seems to stepping over to the left a touch (PC IE in particular) and so is messing up the layout! I am finishing the job off for someone and there is a lot of bits and bobs that don't need to be in there - but when I take stuff out it messes up other parts of the layout! this is the layout and this is the css How can I stop the nav from moving and just make go full width (729px)????? Please save my sanity!!!! D Hi CSS masters, I am building a site for a friend who's starting a concrete business. I just finished making all the BG images, and am now starting the coding process, all CSS based. Well, I'm highly mediocre at CSS design, and could use some help. The build site is here. As you'll be able to see, the entire BG is actually made up of 4 images. The top image repeats along x, the bottom left along why. The other two are to remain static and unrepeated. In IE, the problems are as follows: 1. On top, there is a small white area, and I don't know why. I can't seem to find why it's padded. The two images should but right up against each other to create a seamless piece visually. 2. The part that is currently in the middle should be on the left. Why is it not? 3. The tan portion of the left part should repeat downward along y. It doesn't. Why? In FF, the problems are as follows: 1. The body is not centered. 2. Everything else is fine regarding BG placement (damned IE), but the bottom part of the left image is still not repeating. Help is, as always very much appreciated! Thanks, folks, Chris Hi guys, I'm having trouble with the css on the website I'm building. I have a background image and am trying to arrange the navigation link on the left hand side of the page. The trouble is that I can line up images with the background on IE and Firefox but chrome is proving troublesome. I can't figure out why it works fine in Firefox but not in chrome. Can anyone shed some light or offer me an alternative to get the same effect. jamesdrinkwater.co.uk Thanks in advance everyone James I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck. Here's the site: http://www.caillouette.com/Utilitrek/four/ Here's the CSS for the button elements: Code: #bottombox{
clear:both;
float:left;
display:inline;
width:710px;
height:61px;
margin:0px 0px 0px 0px;
}
.collectionBig
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
width: 271px;
height: 61px;
margin: 0 0 0 0px;
padding: 0;
}
.collectionBig a
{
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
color: #000000;
font-size: 11px;
width: 271px;
height: 61px;
float: left;
color: black;
text-decoration: none;
}
.collectionBig img
{
width: 271px;
height: 61px;
border: 0;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
}
* html a:hover
{
visibility:visible;
}
a:hover img
{
visibility:hidden;
}
.memberBig
{
float:right;
position: absolute;
top:0;
margin-right:5px;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat;
/* white-space: wrap; */
display: inline;
width: 414px;
height: 61px;
padding: 0 0 0 0;
}
.memberBig a
{
display:inline;
color: #000000;
font-size: 11px;
width: 414px;
height: 61px;
float: right;
color: black;
text-decoration: none;
}
.memberBig img
{
width: 414px;
height: 61px;
border: 0;
}
"collectionBig" and "memberBig" are wrapped inside of the "bottombox" div any help is appreciated. -S Hi, I have my images defined in my .css file and then called in the div so that I can write on them and like them this way But the problem is that I seem to be unable to put them side by side because div puts in a line break and span won't show them with their assigned width and height. Any help appriciated! Denis Code:
<html>
<head>
<title> Dublin Blues || Rugby League Football Club</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container" style="border:solid 2px black">
<div class="newsarea" style="border:solid 2px black">
</div>
<div class="welcomeBar" style="border:solid 2px black">
</div>
</div>
</body>
</html>
Code: .mainBackground {
background-repeat: repeat-x;
background-color: #284164;
}
#main_container {
background-repeat: no-repeat;
background-image: url(images/main.jpg);
background-color: #284164;
width: 850px;
height: 520px;
border: solid 1px black;
margin: auto;
}
.newsArea {
background-repeat: no-repeat;
background-image: url(images/main_bg.jpg);
background-color: #284164;
margin-left: 10px;
margin-top: 20px;
width: 370px;
height: 455px;
}
.welcomeBar {
background-repeat: no-repeat;
background-image: url(images/bgRecRed.jpg);
background-color: #284164;
width: 500px;
height: 95px;
}
|
|||||||