|
CSS - Interesting 2.5 Column Design Problem
Howdy.
Disclaimer: I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me. The problem: Here is the design I have for my website (forgive the ascii art): Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors. Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors: Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : ------------------------ | | | : +---------------------+ | | | : | IMAGE from Content | | | | : +---------------------+ | | | : ------------------------ | | | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ I havn't a clue how to do that correctly. I want the Content to wrap around the image callout. I'd appreciate the pointer. Similar TutorialsHi Folks, Newbie here, first post. I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser. Example: http://www.cre8webdesign.co.uk/services.html Can anyone help? Thanks Darren. I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right. However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again. Here's the code: Code: <!-- Start row one --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> <!-- start row two - continue row structure throughout all scenes --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> and the style sheet declarations: Code:
.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}
.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;
}
Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page. I'm more than open to suggestions here! -B I'm converting a site from a table layout to a css layout. I've got a basic 3 column layout and it seems to work just fine except for one problem. my left and middle columns will never be set heights and they are different colors. So, is there anyway to make the two divs be the same height so that the colors go all the way down regardless of which column is longer? here are 2 examples, the first is the left column longer(teal) and the second is the middle column longer(white). first example left column longer second example middle column longer thx! 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? I've been wracking my brain without success over the following problem: I want to create a div block (which is included in other div blocks - but that doesn't really matter) that includes a list of links. However, I want to display the list of links in two columns, side by side. So far it's a piece of cake. But here is the tricky part: The links come from a database and therefore I do not know how many there are at any given time. How can I use CSS to seperate the list of links in two columns with each containing exactly half the links? I do want to keep the list of links as one chunk of HTML, without inserting 'class=""' or 'id=""' into the HTML. Any ideas?? Thanks Steve PS: I have one alternative: Count the number of links coming out of the database and enclose the first half in some sort of .leftColumn div and the rest in a .rightColumn div. But as I said, I want to avoid adding divs into the HTML that contains the links... Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! On the right side of this page the border is messed up but, in the css the mathematics are all correct. I dont know whats wrong??? Have a look at the output of this code he Code:
<html>
<head>
<title>Template</title>
<style type="text/css">
<!--
#header {
border-top: #000000 thin solid;
border-left: #000000 thin solid;
border-right: #000000 thin solid;
position:absolute;
left:5%;
top:30px;
width:90%;
height:178px;
}
#nav {
border-left: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:5%;
top:208px;
width:18%;
height:512px;
}
#content {
border-right: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:23%;
top:208px;
width:72%;
height:512px;
}
-->
</style>
</head>
<body>
<div id='header'> </div>
<div id='nav'> </div>
<div id='content'> </div>
</body>
</html>
Whats wrong??? Daniel Hello all, Thanks for taking the time to review my little issue. Here is a link to the page: http://mcpherson-racing.com/dave/mainpage.htm My problem is that when you collapse the browser width down to a width where the 'icons' (Images in the header) begin to stack and then 'maximize' the browser window the 3 column layout fails and the left column text is in the center. And if you restore that same browser window it breaks again, Refreshing the page will cure it when its in that state. Any ideas? Hello every body, I am just learning how to place the elements of a website using css design (I want to be a better designer :P) here is the problem: http://trustedonlinepharmacy.com/dev/ I have this divs Id s: Code:
#container {
width:760px;
margin:0px auto 0px auto;
text-align:left;
}
#pageHeader {
display:block;
height:140px;
width:760px;
background:url("trusted.gif") no-repeat;
}
#content {
background-image: url('textfull.gif');
background-repeat: repeat-y;
width:760px;
}
#ptext {
position:relative;
top:10px;
left:170px;
width:570px;
padding-left:10px;
padding-right:10px;
background-image : url('pills.jpg');
background-repeat: no-repeat;
background-position: bottom right;
}
#linkList{
position:absolute;
top:150px;
width:150px;
text-align: left;
}
this is the html code using the divs: Code:
<div id="container">
<div id="pageHeader"></div>
<div id="content">
<div id="ptext">
... ptext code
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br>
</div>
<div id="linkList">
link list code....
......
</div>
<div id="footer">
... footer code
</div>
</div>
</div>
the problem is that i have to add <br> in the ptext div for get fill the end of the page of the backgroud (textfull.gif), I want to know if i can do it in another way without the <br>, just an auto mode, and if I can make it look the same in firefox and IE... thanx to every body Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code:
<html>
<head>
<style type="text/css">
body {
background: #3e1f00 url(../images/background.gif);
background-position: top center;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
margin-top:30px;
}
#top {
background: red;
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 167px;
text-align: left;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 758px;
background: pink;
}
#middle {
position: relative;
margin: 0 auto;
width: 758px; height: 200px;
text-align: left;
background: yellow;
}
#bottom {
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 23px;
text-align: left;
background: green;
}
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>
<body>
<center>
<div id="top">
TOP
</div>
<div id="wrapper" class="clearing">
<div id="middle">
MIDDLE
</div>
</div>
<div id="bottom">
BOTTOM
</div>
</center>
</body>
</html>
An interesting web site: http://layouts.ironmyers.com/ This may be common knowlege, but I'm relatively new to CSS and was surprised to find that you can defing completely new tags with css. For example, rather than defining a div.class like this: Code:
div.myclass {
width: 180;
height: auto;
font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 12;
color: black;
padding: 2px 0px;
text-indent: 4px;
display: block;
}
And using it in html like this: Code: <div class='myclass'>bla bla bla</div> You can cut out the middleman (div) entirely and just define a new tag Code:
myclass {
width: 180px;
height: auto;
font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 12px;
color: black;
padding: 2px 0px;
text-indent: 4px;
display: block;
}
Which can be used in the html like so: Code: <myclass>bla bla bla</myclass> I ran several styles defined this way through the W3C validator here and it had no problems with it. (Other than a few font choice gripes) Custom tags worked perfectly in the following Mac browsers: - Camino - Firefox - Safari - Opera - Xyle scope The following two browsers couldn't handle the custom tags rendering a single line of unstyled text. - IE - OmniWeb Can't speak for Windows or Linux browsers (Don't have either OS) but this seems like a pretty neat, W3C compliant, trick to simplify html code. Hope someone else finds this useful Ken look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Hi there folks, Im about to go insane with this one. My site is akamarketing.com and you will notice on the left there is various elements about me & my blog which display fine in IE but the text continues across (without confining to its parent div width specification) in opera and firefox. According to my stats 25% are firefox so I do of course need to fix this issue. The css and html for one broken section is Code: <div align=center style="text-align:CENTER; border:<?=$bordersize ?>px dashed #000000; margin:2px; width:185px; padding:2px; margin-top:2px; margin-bottom:0px; padding 7px; float:left; margin-left:7px; padding-bottom:0px;"> <table border=0 style="border:0px dashed black;"><tr><td style="text-align:left;"><img title="David Callan" style="margin: 0px 5px 0px 0px; padding-top: 0px; border: #000000 1px solid" alt="David Callan" src="http://www.akamarketing.com/images/davesmall.gif" align="left" vspace="0" hspace="0"/>Welcome. I'm <a href="http://www.akamarketing.com/blog/about-dave/" title="Read more about Dave on our blog"><font color="#22229C">Dave Callan</font></a>, a 24 year old SEOer & Web developer from Ireland. I've been doing design, development, seo, ppc, Internet marketing etc. since I was about 15. This site is my canvas!</td></tr></table> </div> Can anyone help me with this? I've tried a couple of things mostly around float properties but no joy. Thanks in advance for any help. I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well. Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar. The page. The css. As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar. How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom? Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css: Code:
#header {
position: relative;
margin: 0 auto;
background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
height: 235px;
width: 760px;
text-align: left;
z-index: 10;
}
'#content {
position: relative;
background-color: #FFFFFF;
height:inherit;
width: 760px;
margin: 0 auto 0 auto;
text-align: left;
border: 1px double rgb(72,183,239);
overflow: hidden;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}
#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}
#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 203px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-3 {
background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}
#primary-nav li#nav-5 {
background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
background: transparent url(img/bg/nav-7-about.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover,
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover,
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover,
#primary-nav li#nav-7.sfhover{
background-position: 0 -26px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a {
width: 107px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 107px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="content">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
<li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
<li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
</li>
</ul>
</div>
<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>
<form id="form1" method="post" action="">
<p>
<label>
<input type="text" name="IDsearch" id="IDsearch" width="150"/>
</label>
</p>
</form>
<div id="leftpanel-head">
Events Calendar
</div>
<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>
<div id="welcome">Test</div>
<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div>
</div>
</body></html>
Demo: http://www.reston.com/Tysons Corner COM Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width. Code: ________________________________________________ | expand | expand | fixed | expand | | | | width | | | | | | | | | | | | | | | | | | | | | | atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width) I'm sure you can help, thx! (if I didn't explain too well, ask all questions ) [/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column. Here is an example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>xyzTrader.com</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> </head> <body id="type-b"><!----> <div id="wrap"> <div id="header"> <div id="site-name">xyzTrader.com</div> <div id="search"> <form action=""> <label for="searchsite">Site Search:</label> <input id="searchsite" name="searchsite" type="text" /> <input type="submit" value="Go" class="f-submit" /> </form> </div> </div> <div id="content-wrap"> <div id="login"> <form method="post" action="/test/header.php"> Username <br /> <input name="uname" type="text" id="uname"> <br /> Password<br /> <input name="pword" type="password" id="pword"> <br /> <input name="Login" type="submit" id="Login" value="Login"> </form> </div> <div id="utility"> <ul id="nav-secondary"> <li class="first"><b>Catagories</b></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> </div> <div id="content"> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> <p>hello<br>sfafssf</P> and here is the css file: Code:
/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}
/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}
/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}
/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}
dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}
/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}
/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}
#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
#search form {margin:0}
#search input {width:8em;margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}
/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
#login {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}
#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}
/* LAYOUT TYPE B */
#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
#type-b #content {margin: 0 23px 0 235px}
/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer}
#nav-secondary a:link {color:#000}
#nav-secondary a:visited {color:#000}
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px}
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00}
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}
/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}
/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
#footer a:link {color:#999}
Can anyone give me some advice or what to do to make this line go the length of the page?? Thanks in advance, Mike ok this is taking to long i go think of something else |
|||||||