|
CSS - 3 Columns With Css And Blogger.com
I'm having trouble getting a layout to look correct in IE (i know same old story) Looks fine is Fire Fox.
Here is a link to see what the problem might be Let me know if you need to see the source code. Thanks, Jrock Similar TutorialsHello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Help! I've spent WAY too much time on this....you wouldn't believe! I made a sliced image header in Photoshop and put it on my site using Dreamweaver. The home page and the calendar page built in Dreamweaver look fine. However, the other pages are actually a Blogger blog at a subdomain. When I put the header in the blog, it does wonky stuff! It looks worse in IE and Firefox (well, maybe--the last code testing did make IE look better). I know its a CSS problem. I've tried lots of different things and have watched them make changes, but nothing fixes it. I don't want to start all over and have my time be a total waste. I am only self-taught on all this stuff, so I think I need someone more knowledgeable to help me. The site is a www hanoverlutheran.com (I understand it takes 5 posts before I can share links, so that's abbreviated). Oh please! I hope someone has the answer! I spent 12 hours alone on it yesterday and many more today! For the life of me, I can't figure out what is causing this problem. One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... Hey, I am trying to edit a blogger template. What I want to do is make each drop down menu a different background color. SO like one item says 1 (hover) 2 | 3 | 4 (background is red) next to 1 is 5 (hover) 6 | 7 | 8 (background is green). Here is the layout and an example @ www. faketester.blogspot .com Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== The columns work, however underneath the selected item, a gap forms. But only on the first 2/3 columns. Why? How can i stop it? Sorry about the messiness of the HTML code, it is dynamically created so readability in source code of page was not thought about! Sometimes you will be able to see it on my testing server. Screenshots for when my server is not online are attached. CSS: css Code: Original - css Code #listview { position:absolute; top:122px; left:273px; border:solid 2px #000; height:412px; width:694px; padding-top:15px; overflow:scroll; } #listview li { background-position:left center; background-repeat:no-repeat; border-left:1px solid #000; border-right:1px solud #000; float:left; height:80px; width:150px; overflow:hidden; margin:10px; text-align:center; }
HTML: html4strict Code: Original - html4strict Code <div id="listview"><ul id="listview_ul"><li class="selected" style="background-image: url(.images/ext/txt.gif);" id="40b65fa114057838a74dc7a4b630c36a" onclick="javascript:getDetails(this,'FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt')">FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt <input id="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" value="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="777468c20ef558d02fac83c104f69389" onclick="javascript:getDetails(this,'U GOT TOLD!.txt')">U GOT TOLD!.txt <input id="U GOT TOLD!.txt" value="U GOT TOLD!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/genericBlue.gif);" id="9eee28d877a7f1616a57e8a52165d99a" onclick="javascript:getDetails(this,'U GOT TOLD.txt111')">U GOT TOLD.txt111 <input id="U GOT TOLD.txt111" value="U GOT TOLD.txt111" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD.txt111" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="5dd99cc991e032ee43afd619fa300157" onclick="javascript:getDetails(this,'You get a message if you dont put any content. Solved now.txt')">You get a message if you dont put any content. Solved now.txt <input id="You get a message if you dont put any content. Solved now.txt" value="You get a message if you dont put any content. Solved now.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/You get a message if you dont put any content. Solved now.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="a120c2992faa1a664a87378674340f0c" onclick="javascript:getDetails(this,'hahahah.txt')">hahahah.txt <input id="hahahah.txt" value="hahahah.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/hahahah.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/php.gif);" id="828e0013b8f3bc1bb22b4f57172b019d" onclick="javascript:getDetails(this,'index.php')">index.php <input id="index.php" value="index.php" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/index.php" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="e4c275a9e3ae1a0ac717c02826694d61" onclick="javascript:getDetails(this,'it works.txt')">it works.txt <input id="it works.txt" value="it works.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/it works.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="872002aaa5df50c813fd3443dc0bf561" onclick="javascript:getDetails(this,'lol.txt')">lol.txt <input id="lol.txt" value="lol.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/lol.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/exe.gif);" id="aeee850280b2d24f213678fe7ca9bc0b" onclick="javascript:getDetails(this,'look at da preety icons.exe')">look at da preety icons.exe <input id="look at da preety icons.exe" value="look at da preety icons.exe" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/look at da preety icons.exe" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li></ul></div>
Hi, I am looking to retrieve content from a database (that part I can handle) and then output it to the browser, but my css is poor. I want to create a two column format, which I am ok with using two div's in using absolute positioning in a relative frame, but that doesn't allow content to flow. I am looking for text that flows from the fixed bottom of the first column to the top of the second. If there is a way to do this, or anyone can point me to any resources, I'd appreciate it. Thanks Hi I am new to css and am trying to use the following code to make a page. i cant seem to position the content on the right of the left nav. i want it so that the content div resizes and stays in the same position when the browser is resized but the leftnav stays in the same position and doesnt re size....any help would be appreciated. third.css body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { margin-top: 50px; margin-left: 50px; margin-right: 50px; margin-bottom: 50px; padding: 0px; background-color: orange; width: 80%; min-width: 181px; } #footer { padding: 0px; position: relative; padding: 0px; background-color: yellow; width: 100%; } #content { left:200px; width:100%; background-color: red; } #leftnav { /*sets properties for the left nav bar*/ background-color : #66ccff; width: 180px; } third.html <div id="container"> container <div id="leftnav">left nav</div> <div id="content">content content content content content content content content content content content content content content content content content content </div> <div id="footer">footer</div> </div> http://jordanmeeter.com/?page=about How would I make it so the left and right columns increase in height as the content gets taller and taller? Thanks. :-) Hi, I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column. PHP Code: <div id="container"> <div id="leftcolumn"> <div id="leftcolumntop"> aaaa </div> <div id="leftcolumnbottom"> bbb </div> </div> <div id="rightcolumn"> <div id="rightcolumntop"> ccc </div> <div id="rightcolumnbottom"> ddd </div> </div> </div> So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time. Hi, i tried to change this blogger theme from 2 to 3 columns... but when done .... the menu bar on sidebar disapear... Can you help me?... for you I don't think is so difficult; I'm not a web designer but a system administrator... so, is not so easy. This is the link where you can find the xml. plantillasblogyweb.googlepages.com/Blogy-iPlantilla-Blogyweb.blogspot.c.xml Thank you in advance Surfparadise Just wondering is it a good way to do columns in css using two spans set to float left and then right and having their widths set, then the content in divs or spans inside them? Hi, im kind of new to css and im trying to find the most effective way to organize content into 4 columns, I need the columns to be fixed of about 175px, is it possible to use list for this? Never Mind, I got it, I just discovered what "clear:" does Notice on NZBMatrix.com on the left hand side, it looks as if there were multiple boxes where normally just one navigation box would exist in a three-column layout. I already know how to do a three-column layout, but my question is, are there several different columns on the left of this website, or is it just one column with several sections defined by borders? Thank you for any advice. Have a little problem with the 3-column layout. I'm converting it down to 2-column, which should be easier. However, in all exampels I've seen, there is no need to assign height, and all of the column divs always stay the same height. I can't seem to duplicate this. Here's what I have: PHP Code: <div id="leftCol"> <p>crap</p> <p>crap</p> <p>crap</p> <p>crap</p> <p>crap</p> </div> <div style="width: 200px;"> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> </div> <div class="clear"> </div> and the relevant CSS: PHP Code: .clear{ /* clearing element for floats */ font-size: 0px; /* for weird IE */ height: 0px; width: 0px; clear: both; } div{ margin: 0px; padding: 0px; border: 0px black solid; } #leftCol{ width: 100px; border: 5px #000077 solid; border-top: 0px #000077 solid; margin: 0px; padding: 0px; float: left; } * html #leftcol{ /* Tan Box Hack */ width: 104px; width: 100px; } IE likes it (IE likes just about anything), but the "more content" text gets wrapped around the "leftCol" in Firefox. Any suggestions to what I'm missing? Thanks! I'm building a CSS web site and the main body of the page has a left column containg navigation and then the content on the right. What I want to have is that the height of the smallest of the 2 columns to equal that of the the highest, currently the navigation either runs over the borders of the actual box, or the text from the right column undercuts the navigation column. To see what I mean see www.twstd.net/future/. Hoiw can I prevent the above display issues? Thanks. I am trying to create a page with two side by side boxes, each coloured differently, and a third box, the full width of the page, directly underneath the other 2. The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box. If I define 1 of the boxes as 49.9% they appear side by side with a small strip between them. The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen. Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each. Here is the code: Code: .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}
.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}
.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}
.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}
Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers |
|||||||