|
CSS - Layout Error
Similar Tutorials- For some reason the content to the right of the vertical line does not all stay to the right, and the border does not go all the way down. A quick glance at the code will demonstrate what I'm trying to accomplish. Please help, I do not understand what I'm doing wrong here. CSS: Code:
/*
Please define the rules of CSS. What takes precedence, inheritance and how specific to define something + shortcuts.
Define what a parent ellement is.
Define float property.
*/
div.container
{
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid black;
border-top: 0px;
}
h1
{
font-family: verdana;
font-size: 1.5em;
font-style: bold;
margin: 0px;
padding: 0px;
}
h2
{
font-family: verdana;
font-size: 1.1em;
font-style: bold;
margin: 0px;
padding: 0px;
}
h2.center
{
text-align: center;
}
h3
{
font-family: verdana;
font-size: .8em;
font-style: bold;
}
div.header, div.footer
{
background-color: black;
color: white;
}
div.left_aircraft_index
{
width:25%;
float: left;
margin: 0;
padding: 0;
border-right: 1px solid black;
}
div.search_content
{
width: 75%;
color: black;
font-style: normal;
font-family: verdana;
margin: 0;
padding: 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Aircraft Database v1.0 - A complete database of known aircraft.</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="header"><h1>UASO :: Aircraft Database</h1></div> <div class="left_aircraft_index"><h2 class="center">Aircraft Index</h2></div> <div class="search_content"><h2 class="center">Search For Aircraft</h2> <p> <form action="searchDatabase.php" method="post"> The search interface will go here. </form> </p> </div> </div> </body> </html> 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 am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so. Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas. I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about. I'm anxious to hear whether this can be acheived or not. Thanks! -B Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie. my code is index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- container -->
<div id="container">
<!-- start wrapper -->
<div id = "wrapper">
<!-- start header -->
<div id = "header">
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<!-- start nav -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end nav -->
</div>
<!--end header -->
</div>
<!-- end wrapper -->
</div>
<h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
<!-- end container -->
</div>
</body>
</html>
css file Code:
/* general html element formatting */
html, body, table {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #000000;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px 10px 0px;
text-align: center;
}
h1 {
font-size: 150%;
margin-top: 0px;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 100%;
}
h5 {
font-size: 100%;
color: #FFFFFF;
}
#container {
background-image: url(images/background_gradient2.jpg);
border: 1px solid #000000;
}
#wrapper {
width: 760px;
height: 600px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 760px;
background: #242424;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul {
padding: 0;
margin: 0;
background-color:#242424;
}
#nav ul li {
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
font-size: 120%;
color: #FFFFFF;
background-color:#778899;
text-decoration: none;
padding: 0px 25px 0px 25px;
border-right: 0px solid #000000;
text-align: center;
width: 9em;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}
please find attached a screenshot in firefox. Any help is appreciated. thanks! Hi, How do I position "new.gif" on the same line as text "some subject here" ? Right now "new.gif" appears on right side as intended but underneath text. Code: <td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td> Thank you. 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/ I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s. Here is what I want in English: 1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page. 2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as 3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom. I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file. Here is my horribly borked attempt at using nested <div>s: Code:
<html><head><title>CSS Hell</title>
<style TYPE="text/css">
<!--
body {
margin: 9px;
margin-bot: 0px;
background: #FFF;
}
#level0 {
background: white;
}
#masthead {
background: blue;
height: 60px;
}
#level1 {
background: #DDD;
border: solid;
}
#menu {
background: #BBB;
width: 150px;
}
#level2 {
background: white;
float: right;
border: dashed;
}
#promo {
background: blue;
float: right;
}
#main {
background: #CCC;
}
-->
</style>
</head>
<body>
<div id=level0>
level 0
<div id=masthead>
branding
</div>
<div id=level1>
<div id=menu>
LEFT SIDEPANE<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
</div>
level 1
<div id=level2>
level 2
<div id=main>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
</div>
<div id=promo>
RIGHT SIDEPANE<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
</div>
</div>
</div>
</div>
</body>
</html>
Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!? 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. 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>
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 Hello, I want need to do the following: div_01 div_02 div_03 div_04 div_05 Do I need to place div_02, div_03 and div_04 inside a div container? Thanks, Miguel tiny pic .com/nqb f9i.png Hey, I'm super sorry for the url but that's the ONLY way you guys will know what I'm talking about. Obviously I'll be doing the more advanced graphics later. Please answer the following questions: I would like the white and the yellow to go on for the rest of the page (no matter how big your monitor is). How would I do this? I also want the green and the dark blue to stretch if I were typing more and more. (I know I would have to save the bottom of the sections of those images and the middle if I were to do this.) And I need this to be completely centered on the webpage. Overall, I can handle the rest. So what attributes/properties do I have to study to get this to work? If you're feeling super nice you can code it for me. ;D Hi there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance |
|||||||