|
CSS - Problem Floating A Column Left In Ie
http://zeroonedesign.com/beyond%2Dmap/www/
Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks Similar TutorialsHello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. 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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
Nevermind... I figured out a way to do it. And I fixed a major typo. hi, this might be a simple question: i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want). this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6? thanks, tim Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Hi there! About a week ago I posted here about an issue, and I received an immense amount of support, so I figured I'd come back here with anything I ran into! My website, in its current state, can be found here. You'll notice that the right column is stuck below the main content area. This is undesirable. Ideally, that gray box would align with the top of the content area, thus creating a simple 2-column layout. In IE (at least version 7), the gray box is shown BELOW the main content area, but still completely inside the #contentwrap div. In Opera and Firefox, however, the gray box is partially in and partially out of the #contentwrap div. I'm not sure what this is due to, (perhaps something weird in my coding?), but either way I just need to get that column to align with the top of the main content area. My code validated fine (but of course that doesn't make it perfect...), and I have provided the complete code for both the (X)HTML and the CSS below: Code: xhtml <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <ul id="linkmenu"> <li class="n-home"><a href="#"><span>Home</span></a></li> <li class="n-bio"><a href="#"><span>Bio</span></a></li> <li class="n-media"><a href="#"><span>Media</span></a></li> <li class="n-contact"><a href="#"><span>Contact</span></a></li> <li class="n-reviews"><a href="#"><span>Reviews</span></a></li> <li class="n-tutorials"><a href="#"><span>Tutorials::</span></a></li> <li class="n-charts"><a href="#"><span>Charts::</span></a></li> <li class="n-links"><a href="#"><span>Links</span></a></li> </ul> </div> <div id="contentwrap"> <div id="content"> <h1>New Website Launched!</h1> <h2>10.01.2008</h2> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.<br/><br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> <h1>This is Only a Test</h1> <h2>10.01.2008</h2> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> <h1>New Site Coming Soon!</h1> <h2>09.29.2008</h2> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. </div> <div id="rightbar"> <h2>THIS IS A TEST</h2> I am trying to see if I can get this column to align to the top of my browser content-wrapper div!<br/><br/> Unfortunately, I can't seem to get it to work!<br/> </div> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css
html, body {
margin: 0px;
padding: 0px;
background: url(../images/bgpattern.gif);
}
#entire-page {
}
#page-container {
margin: auto;
width: 750px;
}
#ghost {
height: 15px;
}
#header {
height: 110px;
background: url(../images/headers/rotator.php);
background-repeat: no-repeat;
}
#navigation {
width: 750px;
height: 40px;
background: url(../images/navigation.gif);
background-repeat: no-repeat;
}
ul#linkmenu, #linkmenu li {
padding: 0px;
margin: 0px;
list-style: none;
}
ul#linkmenu {
float: left;
height: 0;
}
#linkmenu li {
font-family: "Times New Roman", Times, Georgia, sans-serif;
position: relative;
width: 10px;
}
.n-home {
top: 7px;
left: 30px;
font-size: 22px;
}
.n-bio {
top: -18px;
left: 116px;
font-size: 22px;
}
.n-media {
top: -43px;
left: 179px;
font-size: 22px;
}
.n-contact {
top: -70px;
left: 271px;
font-size: 24px;
}
.n-reviews {
top: -95px;
left: 392px;
font-size: 22px;
}
.n-tutorials {
top: -120px;
left: 485px;
font-size: 22px;
}
.n-charts {
top: -145px;
left: 592px;
font-size: 22px;
}
.n-links {
top: -170px;
left: 678px;
font-size: 22px;
}
#linkmenu li a {
text-decoration: none;
background: none;
}
#linkmenu li a span {
visibility: hidden;
}
#contentwrap {
background-image: url(../images/contentbg.gif);
background-repeat: repeat-y;
width: 750px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#content {
width: 495px;
padding-right: 245px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #858585;
}
#rightbar {
float: right;
width: 225px;
margin-left: 505px;
margin-right: 10px;
background: gray;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 12px;
color: #000000;
}
#content-bottom {
height: 5px;
background-image: url(../images/contentbgbottom.gif);
background-repeat: no-repeat;
}
#footer {
height: 80px;
padding: 5px;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-style: normal;
font-size: 11px;
color: #cfcfcf;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 24px;
font-weight: 200;
color: #1c2939;
}
h2 {
margin-top: 0px;
margin-bottom: 7px;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
font-size: 12px;
font-weight: 200;
color: #c49271;
}
THANK YOU!!!! -Tom Winchester- hello, ive been following a tute designed for a two column template and trying to follow this logic to make a 3 column template but i cant make it work unfortunately. any help would be really appreciated, thank you! apologies for a 'here is the code' post, but here is the code basically i want a 3 column template with 7 rows and only the 3rd row from the top really being divided into 3 columns -standard header, main content, footer, kind of design. whole 'table' is 587 wide and column sizes are 202 for left and right and 183 for center column. (no live link sorry) index page: 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=utf-8" /> <title>Untitled Document</title> <link href="css/template_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="tag">Tag</div> <div id="header">Header</div> <div id="left">Left</div> <div id="main_content">Main Content</div> <div id="right">Right</div> <div id="login">Login</div> <div id="menu1">Menu1</div> <div id="menu2">Menu2</div> <div id="footer">Footer</div> </div> </body> </html> css file: Code: body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}
#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #000000;}
#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}
#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}
#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}
#right {
float: right;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}
#login {
clear: both;
width: 587px;}
#menu1 {
clear: both;
width: 587px;}
#menu2 {
clear: both;
width: 587px;}
#footer {
clear: both;
width: 587px;}
Hi there, I have a left coloumn that is used for my navigation. However, I want it to go all the way down the page so it is the same height as my content div. I have tried the following, but it is not working. PHP Code: float: left; width: 200px; background-color: #070c12; padding: 15px; height: 100%; Any ideas? Thanks hey , i need help guys,, www.bekirhoca.com < this is my site and the left columns height is not fixed to the content. I want all the columns at the same height. But when the middle content is long the left column remains short. And also I have a problem with that menu or something. Just go over the menus without clicking and you'll see the scrollbar is going crazy and the lower part of the page acts crazy when mouse is over links. And the page is a little bit heavy acting for that reason,, but that problem is okay in firefox although not in ie. Please help me... thanx from now for your replies A website generally has a header/footerand then a left column and main column. The left column contains links and the main column contains the content. Years ago I saw a design that was validated and used CSS to achieve a tableless design that actually had the main column content BEFORE the left column links in the sourcecode, but on the site itself, it was like a normal site (left column was on the left and main content was on the right or center). Does this achieve better search engine results by having the main content first in the eyes of the search engines, but in reality, to the people, the left links actually shows up first. Also, can someone provide a link to this or show some coding on what you have seen done to achieve this? Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated! My html code: 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=us-ascii" />
<title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
<!-- begin main content -->
<div id="center" class="column">
<br />
<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
<h5>Still Life with Colour '08</h5>
</div>
<!-- end main content -->
<!--begin left nav list -->
<div id="left" class="column">
<br />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About the Artist</a></li>
<li><a href="resume.html">Artist's Resume</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<!--end left nav list -->
<!--close content div -->
</div>
<!--begin footer information -->
<div id="footer">
<center><p class="foot">Copyright 2008</p></center>
</div>
<!-- end footer information -->
</body>
</html>
My CSS Code: Code: body{
background-color: White;
font-size: 16px;
margin: 0;
padding: 0;
}
#header{
background-color:#333;
height:150px;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 100px; /* RC width */
}
#left{
float:left;
width:200px;
background-color:#afeeee;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#center {
background-color:#ffffff;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color:#48d1cc;
height:100px;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
ul.nav {
list-style: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: large;
}
ul.resume {
list-style: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: 1.3em;
}
#left a {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
display: inline;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 2.75em;
margin: 0;
margin-right: 2px;
text-align: center;
text-decoration: none;
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! |
|||||||