|
CSS - The Proper Way To Do A Layout With Css?
I have recently begun training on CSS. I would say I am pretty skilled with the basics of creating a layout. I can pretty much do any layout, 3 column, 2 column, or whatever. The way I have been doing this is though is to specify the width using pixels of each <div> area. I have also been specifying the margins: and padding: using the exact pixels as well.
I know this way does not cause the website to resize when I resize my browser. I also know that in order to cause it to resize I need to use %'s and such. Is there an advantage to this besides the obvious resizing ability. What do you guys all do? And is the best way to do a layout to use the <div> and then set up my scripts to display in the content <div> area each time? Thanks. Similar TutorialsHi there. I've got two styles defined for links...one of which is Code:
A:link#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:visited#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
}
A:hover#redir {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C90016;
text-decoration:none;
display:inline;
}
when i want the link to be the 'redir' style, i put Code: <a href="http://www.whatever.com" id="redir">clicky</a> but that won't validate because id's are supposed to be unique. what's the deal? thanks! Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Thanks for reading my question. I went to http://jigsaw.w3.org/css-validator/ to see how I was doing on my CSS. Seems I'm doing ok. I am just having problem with the Scrollbar portion. What is the proper way of doing this? Here is my result from the validation Quote: Errors URI : file://localhost/kelly.css * Line: 0 Context : #info Property scrollbar-face-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-highlight-color doesn't exist : #ffac11 * Line: 0 Context : #info Property scrollbar-shadow-color doesn't exist : #d4940e * Line: 0 Context : #info Property scrollbar-arrow-color doesn't exist : #b12514 http://www.websitedev.de/css/validator-faq says a bit about it. Just wondering if Any of the scrollbar stuff is allowed, and will be validated? Thanks, Brad Hi , I am really stuck in this css . i have tried a lot but cant get it working right in i.e6 . It is working fine with firefox but not i.e 6 .I am already using a javascript which makes css works for i.e 6 . i have attach the image where it shows the difference . Here is my css code . Code:
#nav, #nav ul{
margin:0 0 0 18px;
top:auto;
padding:0px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:2em;
font-weight:bold;
font-family:"times new roman";
letter-spacing:-1px;
font-size:17px;
}
#nav li ul{
font-size:15px;
font-weight:normal;
background-color:#000000;
width:auto;
height:auto;
top:auto;
margin:0;
letter-spacing:0px;
border:0 none black;
}
#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#FFB208;
cursor:pointer;
}
#nav li{
float:left;
position:relative;
margin:0 0 0 12px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:33px;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
vertical-align:text-top;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0 0 0 10px;
float:left;
right:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
Javascript code:- Code:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
}
);
}
$(document).ready(function(){
mainmenu();
});
Is there anything more i need to do in my css file? Regards, Umair alright I have a css/folder in root directory. I have files in child directories, I'm calling the parent file by ../folderlocation/file to use my css but my images wont load that are in that css... The files in root directory show images that use exact same css.. only difference is those files are in root, and the one in child directories wont show images. The layout is shown though, any suggestions or tips would be greatly appreciated. CSS Definition: span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image. In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices. As far as I can tell, there isn't quite as good of a solution for background-images. Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it. So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background? Am I missing something? Hello all. May I ask for your help? I just finished developing a site for personal page (e.g. blog, myspace, etc) promotion, but I'm having troubles correcting my stylesheet. The home page is basically a bunch of pictures of people, but I don't have anyone loaded in the system yet, so I can't get a feel for whether or not it is behaving properly. This probably sounds like SPAM, but oh well. Would anyone be willing to give it a try and provide your thoughts in this post? The web address is http://www.klik.us. Thanks a ton for any help/comments. hi, is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so. Code:
a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}
a.big {font-weight:bold;}
thank you There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop. temporary site <--- fixed. in a state of constant change. The css is layout.css . I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies). I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's 'Ello, I have just started to create a new web site for my self about a game called Warhammer 40,000. Although I have come across a problem near the start of its construction. I have a layer in the top right hand part of the web site for the search fields, on Internet Explorer it positions it self fine, but in Netscape (tried in v7.2) and FireFox (tried in v1.0 and v1.0.3) it its slightly higher and in Opera it just displays it all the way off to the bottom of the web site. One thing I have noticed is that this layer aligns up perfectly in Opera providing there is nothing between the two div tags, which seems strange to me. Here is the home page of the web site, as you can see there isn't much done to it yet as I want to fix this problem before procceding onwards. My CSS document is located here. If you view this in Opera v7.52, Netscape v7.2, FireFox v1.0 and/or v1.0.3 and Internet Explorer v6 you will see what I men in the top right hand corner, may have the same effect in other versions of these browsers but I have not checked. Thank you in advance, El Barto. Hi I have a problem where my design does not look the same in 2 browsers for MACS. Netscape 7 MAC OSX 10.3 and Opera 6 MAC OSX 10.3. If you take a look at http://dmumford.bizhat.com/calibre/ you will see what it is supposed to look like. The links below are the MAC screenshots taken from browser cam http://www.bullsigns.com/netscape7-mac-osx-10.3.jpg http://www.bullsigns.com/opera6-mac-osx-10.3.jpg If anyone could help, i would be eternally grateful, as I have never needed to worry about MACS before. Thank you This is my mockup: http://beta.investchallenge.com/ The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS. Any ideas? My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content. I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
}
#leftcolumn {
display: inline;
float: left;
left: 15%;
width: 150px;
}
#centercolumn {
float: left;
width: 511px;
height: 100%;
margin-left: 2px;
padding: 8px;
border-left: 1px solid #494949;
border-right: 1px solid #494949;
background: url(/images/bg.png) no-repeat top left;
background-color: #FFDCAA;
}
#rightcolumn {
float: left;
width: 150px;
margin-left: 1px;
}
#mainnav {
width: 150px;
padding: 0 0 0 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
color: #FFDCAA;
}
#mainnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainnav li {
margin: 0 0 0 0;
border-left: 7px solid #C10E0E;
padding: 0 5px 0 0;
}
#mainnav li a {
display: block;
height: 15px;
vertical-align: middle;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #C10E0E;
color: #FFDCAA;
text-decoration: none;
text-align: right;
}
html>body #mainnav li a {
width: auto;
padding: 0;
margin: 0;
}
#mainnav li a:hover {
background-color: #C10E0E;
border-left: 7px solid #FFDCAA;
color: #FFF;
padding: 0;
margin: 0;
}
#mainnav h3 {
padding-left: 5px;
font-size: 14px;
font-weight: bold;
color: #F6D4A4;
font-style: italic;
}
thanks! Ok, i am trying to make a layout and it isnt working, i have tried MANY diffrent ways of trying to do this and when i tried to do it it looks like this: screenshot here but i want it to look something like this site: link here! and here is the code: Code: <html>
<head>
<title>Website</title>
<style type='text/css'>
body {
background: #333333;
}
#container {
width: 905px;
<!-- border-style: solid;
border-width: 1px;
border-color: white; -->
}
.banner {
background-image: url('images/banner.png');
width: 900px;
height: 132px;
}
.cen {
background-image: url('images/Comment_top.png');
width: 494px;
height: 18px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 13px;
}
.Nav_L {
background-image: url('images/N_head.png');
width: 200px;
height: 17px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 13px;
float: left;
}
.Nav_R {
background-image: url('images/N_head.png');
width: 200px;
height: 17px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 14px;
float: right;
}
.nav
{
text-align: center;
background-image: url('images/Nav.png');
text-decoration: none;
font-family: verdana;
height: 18px;
width: 200px;
font-size: 10px;
display: block;
}
</style>
<head>
<body>
<!-- start and center container -->
<div align='center'>
<div id='container'>
<!-- start banner -->
<center>
<div class='banner'></div>
</center>
<!-- End banner -->
<!-- start table -->
<table valign='top'>
<!-- start Left nav -->
<div align='left'>
<div class='Nav_L'>General</div><br>
<div class='nav'>test</div>
</div>
<!-- End Left Nav -->
<!-- start right nav -->
<div class='Nav_R'>Statistics</div>
<!-- End Left Nav -->
<!-- Start middle -->
<center>
<div class='cen'>.::Welcome::.</div>
</center>
<!-- End middle -->
</table>
</div>
</div>
<!-- End center and container -->
</body>
</html>
please can someone help me fix this problem. i kinda need it done asap |
|||||||