|
CSS - Css Layout Help
So I'm trying to get a semi-liquid layout that has the side benefit of allowing the HTML page content to be organized in a way that losing the stylesheet won't kill it.
Ideally, the HTML page would be: LOGO BREADCRUMBS CONTENT MENU RIGHTSIDE CONTENT FOOTER Unfortunately, I've had to move the rightside content up in the page order since I can't seem to configure my CSS in a way that makes it work the other way. This is as far as I've gotten, and I can't get the footer to properly begin at the end of the longest element. I know it's a side effect of the absolute positioning of the Logo and Menu, but I can't think of a way to layer this stuff any better. Help! If you can help me get this up and running, I'll be sure to thank you and hit you back with a link on my site when it's done. Since I can't link directly to anything yet, here's the image of what the layout should look like. I want the footer to fall under the scroll bar if there is one, I don't want a ever-present footer. Code: www.ctechsinc.com/temp3/mockupb.gif Code:
* {
padding-left: 0px;
margin:0px;
}
table {
border-collapse:collapse;
}
img {
border:none;
}
#container
{
width:100%;
}
.logo {
float: left;
height: 260px;
width: 200px;
background-color: #0099CC;
}
.menu {
background-color: #996699;
width: 200px;
height: 150px;
float: left;
position: absolute;
top: 260px;
left: 0px;
}
.greenwrap {
background-color: #006633;
margin-left: 230px;
margin-top: 10px; /* this can be deleted once implemented; it's only here to help align things */
}
.breadcrumb {
background-color: #99CCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
min-width:220px;
height:100px;
background-color: #00CCCC;
float: left;
}
.contentwrap {
background-color: #00FF99;
float: left;
}
.sidebar {
width: 200px;
background-color: #3399FF;
float: none;
right: 0px;
position: absolute;
}
.box1 {
background-color: #00FFFF;
min-width:220px;
margin-top: 20px;
margin-right: 220px;
margin-bottom: 20px;
margin-left: 20px;
}
.qlink {
margin: 20px;
}
.footer {
margin:0px;
width: 100%;
float: left;
clear: none;
}
Code: <html>
<head>
<link href="screen2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div class="logo">
Logo
</div>
</div>
<!-- content, RH -->
<div>
<div class="greenwrap">
<div class="breadcrumb">
<h1>BREADCRUMBS</h1><br>
</div>
<!-- <div class="content"> -->
<div class="contentwrap">
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
</div>
<div class="sidebar">
<div class="qlink">
<p>boring content boring contentboring content boring contentboring content boring contentboring content boring contentboring content boring content
</p>
</div>
</div>
<!-- </div> -->
</div>
<div class="menu">
<p>Menu</p><p>Menu</p><p>Menu</p>
</div>
<div class="footer">
<p>Fooooooooooooooooooooooooooooooooooooooterrrrr!</p>
</div>
</div>
<!-- menu -->
</body>
</html>
Similar TutorialsHello, 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 was working on making 2 different link menu's one that dropped down and one that was stationary underneath it. On my computer it looks fine but on some computers the bottom link is partially underneath the top one. and the opacity filter's do not show up especially on mac's. Was wondering if anyone could help. Heres the website link, and then the code. http://www24.brinkster.com/mattphat/test2.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:780px;
height:35px;
background:#F0ECEB url(../meeting.jpg) 0 20px no-repeat;
position:relative;
margin:0 0 8px 0;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:116px;
height:1.5em;
font-weight:bold;
color:#888;
border-bottom:8px solid #888;
border-top:1px solid #888;
border-left:1px solid #888;
border-right:1px solid #888;
background:#F0ECEB;
padding-left:10px;
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:116px;
w\idth:116px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #EE3233;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:116px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:transparent url(../../opacity/opaque.png);
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:116px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}
/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:116px; /* for IE5.5 faulty box model */
width:116px; /* for IE6 */
}
#nav {
float: left;
width: 780px;
height: 20px;
margin-top: 0;
padding: 0;
list-style: none;
background: #ccc;
border-bottom: 1px solid #999;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
float: left;
display: block;
padding: 0px 10px 0px 5px;
text-decoration: none;
font-weight: bold;
font-size: 85%;
color: #666;
background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
}
#nav b {
float: left;
display: block;
padding: 0px 10px 0px 5px;
text-decoation: none;
font-weight: bold;
font-size: 95%;
color: #EE3233;
background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
}
#nav #nav-1 a {
padding-left: 10px;
padding-right: 5px;
}
#nav a:hover {
color: #000;
}
</style>
<BODY>
<div id="wrap 2">
<div id="wrap">
<div class="menu">
<ul>
<li><a class="drop" href="http://www24.brinkster.com/mattphat/ymca3.html">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/hoursofoperation.html" title="Hours of Operation">Hours of Operation</a></li>
<li><a href="http://www24.brinkster.com/mattphat/membershiprates.html" title="Membership Rates">Membership Rates</a></li>
<li><a href="http://www24.brinkster.com/mattphat/yassurance.html" title="Y-Assurance">Y-Assurnace</a></li>
<li><a href="http://www24.brinkster.com/mattphat/employment.html" title="Employment">Employment</a></li>
<li><a href="http://www24.brinkster.com/mattphat/contactus.html" title="Contact Us">Contact us</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcatorrington.html">Torrington
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/tfacility.html" title="TFacility">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tchildcare.html" title="TChildcare">Childcare</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tlasers.html" title="Lasers">Lasers</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tcamp.html" title="TORYMCA">TORYMCA</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tyhouse.html" title="Y-House">Y-House</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcawinsted.html">Winsted
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/wfacility.html" title="Facility Schedule">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wchildcare.html" title="Childcare">Childcare</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wcamp.html" title="Camp Rising StarCamp Rising Star</a></li>
<li><a href="http://www24.brinkster.com/mattphat/WYSB.html" title="WYSB">WYSB - Winchester Youth Service Bureau</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wliteracy.html" title="Literacy">Literacy</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wvolleyball.html" title="Y Volleball Juniors">Y Volleball Juniors</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">Cannan
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/cfacility.html" title="Facility Schedule">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/cchildcare.html" title="Childcare">Childcare</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcagiving.html">Giving
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/strongkids.html" title="2009 Strong Kids Campaign">2009 Strong Kids Campaign</a></li>
<li><a href="http://www24.brinkster.com/mattphat/givingvol.html" title="Volunteering">Volunteering</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../menu/zero_dollars.html" title="?">?</a></li>
<li><a href="../menu/embed.html" title="?">?</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</div>
<ul id="nav">
<li id="nav-1"><b>Fall 2009 Programs </b></li>
<li id="nav-2"><a href="http://www24.brinkster.com/mattphat/youthaquatics.html">Youth Aquatics </a></li>
<li id="nav-3"><a href="http://www24.brinkster.com/mattphat/aquatics.html">Aquatics </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/wellness.html">Wellness </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/seniors.html">Seniors </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/youthsports.html">Youth Sports </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/preschoolPE.html">Preschool PE </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/Specialty.html">Specialty </a></li>
</ul>
</ul>
</div>
</div>
</BODY>
</HTML>
I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much. <!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=ISO-8859-1" /> <title>Full Height</title> <style type="text/css"> /*<![CDATA[*/ body { height: 100%; margin: 0; } #container { position: absolute; top: 0; left: 50%; margin-left: -350px; width: 700px; height: 100%; background-color: #fff; border: 1px solid red; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; } #nav{ width:135px; position:absolute; background-color:#000; left:0px; height:100%; float:left; clear:right; top:0px; margin-top:0px; } #banner{ width:565px; position:absolute; background-color:#f00; left:135px; height:125px; float:right; } #content{ width:565px; position:absolute; margin-top:125px; background-color:#00f; left:0px; height:100%; float:right; clear:left; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="nav"> </div> <div id="banner" </div> <div id="content"> </div> </div> </body> </html> 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! Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands. Any tips on how this needs to be done? Hey, So I'm trying to create a blogger skin by myself and I'm already stuck. I want the template to look something like this: *** And I failed while I was looking for that kind of a template. And I did search, for a decent amount of time. So, any help? Does somebody know, where can I get a template like that or how can I create it myself? Thanks a bunch, Lara. EDIT: Um, new user accounts are not permitted to create posts containing URLs? Aw'sm. So, how can I show you my idea of the layout? :/ Hi I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div. I would like some help if poss on how to put this design into divs before I plough staright in!! Thanks for any help or advice! '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. Hello. I am currently trying to learn CSS. I have experience in HTML, PHP/mySQL, and some .NET(ASP.NET & C#). I am currently working on a web design project. I know how beneficial CSS can be. I am understanding most of the concepts. I am trying to divide my page up into a parent main page. For example, there is a background color(style). On top of that is my parent main page section. It is similar to a piece of paper on top of a larger(darker) piece of paper. Then within that main page I am going to have about 3-4 separate boxes, which will make up different sections(news, departments, etc). The problem I am having is I have everthing setup with 1 box within the main page. However, I put the other box in the same nested <div class = "page"> tag and I can get it where I want in terms of left, right, and bottom positioning for margins. However, I can not get the 2 boxes to be on the same row. There is space on my page that I cannot use. With my prior experience I know that the solution to this problem was using nested tables. However, from my understanding I thought I could refrain from using tables and use some CSS techniques instead. Please give me any input you might have or any questions that might seem confusing. I might be able to post up a site so a person could see what I am trying to do. I'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers: lab.wx3.com/cssprob/layout_challenge.png (sorry, I'm a new user so I can't post the http part) The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space. I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css. Ok I've been stuck on this layout for about 2 days and I've had it. I was wondering if someone would be willing to help me with it through AIM or MSN messager. Also if no one is willing to help I'm willing to pay someone 30-40$ to code the layout for me in CSS so it works in Firefox and IE. I pretty much just need the stylesheet or the one on one help to make it work. If you're willing to help me IM ME at stareatceiling or MSN: ajay@statc.net . It'd be cool to have this done tonight or tommorow so i can start developing the backend for it. 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 Hey, I know how to do this using a table, but I'm worried it will break down in certain browsers and I want to know the best way to go about this and incoperate some css and divs.. Here is what the table would consist of background: url ('../images/topbg.jpg') repeat-x; height: 295px; width: 850px; 1st row = 1 column height: 155px; 2nd row = 8 equal columns height: 140px; In each of these 8 columns I want to insert an image link which are centered vertically as well as horizontally Attached is my html page and my css file. The css is a template i got off ssi-developer. I'm changing it around a bit to fit my needs. The way I have the page now is fine I'm just curious to know if I can do this one thing. What I'm wondering is if I have to make different classes for the multiple rows that I have. Is there a way I can make the same layout without making all the rows. Once you see my files you will get a better understading of what I'm trying to accomplish. I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom. I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done? FYI, the site is currently at http://users.adelphia.net/~mmorasch/ |
|||||||