|
CSS - Problem With Divs
I'm having some difficulty with the divs in my new site and was wondering if you could take a look and point out where I'm going wrong.
My site is located at http://www.rockapedia.co.uk and the stylesheet at http://www.rockapedia.co.uk/style.css Much appreciated, Bailz. Similar Tutorialsi am currently working on a layout that isnt working out for me... the xhtml for the website so far (very simple form) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Tower C</title> </head> <body> <div id="header"></div> <div id="links"></div> <div id="body"> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> </div> <div id="side"></div> </body> </html> and the css code i have is Code: #header {
position: absolute;
background-color: #a7e83f;
height: 124px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 20px;
}
#links {
position: absolute;
color: #000000;
background-image:url(images/linkbg.gif);
height: 23px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 144px;
}
#body {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ede2da;
width: 57%;
left: 4%;
right: 39%;
padding: 0px;
top: 167px;
overflow: visible;
}
#side {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #dad1c9;
width: 35%;
left: 61%;
right: 4%;
padding: 0px;
top: 167px;
overflow: visible;
}
when the body div has more text than would fit it expands because of the overflow option... my problem is that the side div will not resize with the body div or visa versa any chance anyone knows how i can fix this? here is a link so you can see http://people.brunel.ac.uk/~dt08ajm/towerc/ I used a div for each individual section (id=section) and on the second row, instead of displaying three like the first row it displays one on the far right and then it displayes the other two on the next row in the left and center. It's probably a small problem but i cant figure it out. I know i coudl easily do this using an html table but i'm trying to divert from using tables on anything other than just text. Stylesheet code Code:
Body {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 8pt;
font-weight: bold;
color:#666666;
text-align: center;
min-width: 911px;
background-image:url('/images/sq.jpg');
}
p.footer {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 6pt;
color:#666666;
}
p.news {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 10pt;
font-weight:900;
color:#CCCC99;
}
p.title{
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 14pt;
font-weight:900;
color:#FF9933;
}
form {
font-family: "Lucida Sans Unicode",sans-serif;
font-size:8pt;
color:#666666;
}
#container{
width:911px;
height:100%;
border-style:solid;
border-width:1px;
border-color:#CCCCCC;
margin:0 auto;
text-align: left;
background-color:#FFFFFF;
}
#topbar {
width:911px;
height:299px;
padding-left:4px;
padding-right:4px;
padding-top:9px;
padding-bottom:9px;
background-color:#EEEEEE;
background-image:url("images/topbg.jpg");
}
#menubar {
width:911px;
height:34px;
border-width:0px;
}
#content{ width:911px;
min-height:502px;
border-color:#cccccc;
border-top-width:12px;
border-bottom-width:12px;
border-left-width: 0pt;
border-right-width: 0pt;
border-style:solid;
text-indent: 3px;
}
#section { padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
width: 240px;
float: left;
vertical-align: top;
border-width:0px; }
#rightbar{
width:174px;
height:263px;
}
#right_bot{
width:174px;
height:51px;
}
#footer {
width:780px;
height:50px;
}
#bottom {
width:600px;
height:35px;
}
#logos {
width:600px;
height:50px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #333333;
}
#port div{display:none;}
p.port {
font-size:8pt;
}
html code Code: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Keywords" content="web development,php,scripts,web solutions,adrian wisernig,statc,cheap web design,mysql" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>Statc.net- php.mysql.flash, and other premium web solutions</title> </head> <body> <div id="container"> <div id="topbar"> <center><img src="images/s9.jpg" alt="" height="278" width="873" border="0"/></center></div> <div id="menubar"> <img src="images/layout_08.jpg" alt="" height="32" width="45" border="0"/><img src="images/layout_09.jpg" alt="" height="32" width="84" border="0"/><img src="images/layout_10.jpg" alt="" height="32" width="93" border="0"/><img src="images/layout_11.jpg" alt="" height="32" width="122" border="0"/><img src="images/layout_12.jpg" alt="" height="32" width="126" border="0"/><img src="images/layout_13.jpg" alt="" height="32" width="132" border="0"/><img src="images/layout_14.jpg" alt="" height="32" width="146" border="0"/><img src="images/layout_15.jpg" alt="" height="32" width="129" border="0"/><img src="images/layout_16.jpg" alt="" height="32" width="34" border="0"/></div> <div id="content"><center> <br> <div id="section"> <img src="images/services.jpg" alt="" height="159" width="230" border="0"/><br/>View the large array of services we offer to ensure sucess for your business. </div> <div id="section"> <img src="images/portfolio.jpg" alt="Portfolio"> Assure yourself by viewing our past work and clients. </div> <div id="section"> <img src="images/contact.jpg" alt="Contact"> View contact information for our company. </div> <div nowrap="true"></div> <div id="section"> <img src="images/partners.jpg" alt="Partners"> View our partners. </div> <div id="section"> <img src="images/about.jpg" alt="About Statc"> Find out more information about our company.</div> <div id="section"> <img src="images/resources.jpg" alt="Resources"> View and download free resources to help your conquest for sucess. </div> </center></div> </div> </body> </html> Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } (vectortorque.com). I am trying to use a container div for all of my content, but for some reason browsers like FF and Opera won't recognize that there is a difference between the main div for the page layout and the div for the content even though they have different ids. So if I set a top margin for the "contentcontainer" div, it is pulling down the "midbox" page layout div with it. I want to be able to move the "contentcontainer" div anywhere within the "midbox" div without moving the "midbox". Can someone tell me how to fix this please. Thanks. This is the main container div for the page: Code: div#midbox {
min-height: 100%;
width: 700px;
background-color: #FFFFFF;
margin-left: 270px;
margin-top: 0px;
border-left: 3px solid #FFF;
border-right: 3px solid #FFF;
}
This div should contain all of the content: Code: div#contentcontainer {
width: 500px;
height: 500px
text-align: left;
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
border: 1px solid black;
}
This is the actual code for the page: Code: <div id="midbox">
<div id="contentcontainer">
<div class="topdot"><div class="botdot"><div class="leftdot">
<div class="rightdot"><div class="bl"><div class="br"><div class="tl"><div
class="tr">
<table class="content" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./resources/images/welcome.jpg" width="125" height="50" alt=""></td>
</tr>
<tr>
<td><p>(Content Removed)</p></td>
</tr>
</table>
</div></div></div></div></div></div></div></div>
</div>
</div>
On the page http://www.thoroughbredmusic.co.uk, I'm trying to get the logo in the top left of the screen to appear above any other div on the page. At the moment, the div containing the logo is within the overall div which houses everything in the center, within the yellow border. index.php: Code: <body> <div id="wrapper"> <div id="logo"></div> style.css: Code:
div#wrapper
{
text-align:left;
margin:0 auto;
width:723px;
margin-top:120px;
background-image:url(mockup.jpg);
border-color:#FFFF33;
border-style:solid;
border-width:thin;
background-color:#000000;
background-repeat:no-repeat;
overflow:visible;
}
div#logo
{
background-image:url(logo.gif);
width:328px;
height:198px;
margin-left:-50px;
margin-top:-100px;
float:left;
}
I created this based upon firefox, and in firefox it appears as intended- just above and to the left, but overlapping, the top left side of the main div (#wrapper) In IE, however, it appears in the same position, but everything outside the main div is invisible. I tried a number of methods, including z indexes and overflow:visible within body{}, but with no luck. Anyone have any ideas? Thanks a lot, Tom hi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... [code] <div id="wrapper" style="background-color:black;padding:2px;overflow:visible;"> <div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div> <div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div> </div> [code] here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you. Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner: Code:
<asp:FormView DataSourceID="SqlDataSource20" runat="server">
<ItemTemplate>
<div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
<div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
<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="728" height="90">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<%#Eval("bannerSrc") %>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="opaque" />
</object>
</div>
</div>
</ItemTemplate>
</asp:FormView>
I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php Hi all, So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8. Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place. But I cant figure out what is causing the news div to move, any advice would be greatly appreciated Code:
<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
<?php include('components/Header.php'); ?>
<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title', 'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
<param name="movie" value="flash/news.swf" />
<param name="quality" value="high" />
<embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
</object></noscript>
</div>
<div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
<img src="images/header_sponsorshipoptions.jpg" />
<br /><br />
<img src="images/gr_platinum.jpg" />
<br /><br />
<img src="images/gr_gold.jpg" />
<br /><br />
<img src="images/gr_silver.jpg" />
<br /><br />
<img src="images/gr_bronze.jpg" />
<span style="left:29px; top:2px;"><p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com</p></span>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div>
<div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
<?php echo $listing; ?>" >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
<p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com<br />
<br />
We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
<br />
<br />
<img src="images/gr_platinumsponsor.jpg" />
<br />
<br />
<?php
$type = "platinum";
include('components/logoviewer.php');
?>
<img src="images/gr_goldsponsor.jpg" />
<br />
<br />
<?php
$type = "gold";
include('components/logoviewer.php');
?>
<img src="images/gr_silversponsors.jpg" />
<br />
<br />
<?php
$type = "silver";
include('components/logoviewer.php');
?>
<img src="images/gr-bronzesponsors.jpg" />
<br />
<br />
<?php
$type = "bronze";
include('components/logoviewer.php');
?> </p>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div></div>
</div>
</body>
</html>
I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect. So any help is greatly appreciated Got a problem in ie6 with divs dropping and a slight over lap in ie7. The tables are set width inside a 600px wide div but no matter what i do the columns on the right keep dropping. anyone have any ideas? how can i post screenshots when no urls allowed? I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Hi, I've a problem designing with CSS. This is the html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="structure-yellow.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="headimage">test</div> <div id="greybar">test</div> </div> </center> </body> </html> And the attached css file is: Code:
div#main {
border: solid #000000 1px;
padding: 3px;
width: 780px;
margin: 0 auto 0 auto;
}
#headimage {
vertical-align: middle;
height: 100px;
background: #FFFF00;
}
#greybar {
position: relative;
top: 3px;
background: #CCCCCC;
}
Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not. What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file. How can I solve this problem? I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning. Any ideas? Thanks, Caste Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol Hi All, I'm trying to re-order the divs in my code, so that when it is previewed, the main content div - which is my first div in code previews below the div containing the navigation, which appears below the main content div in code. I'm told that the closer the main content is to the top of the page in code,the better as far as search engine optimisation is concerned (styles will be in a separate document). I have managed to do this using both negative margins and absolutely positioned divs inside a relative div. my problem is that if the amount of text inside my content div increases, it throws off the margins/positioning so that the text actually appears on top of the navigation div. If anyone has any ideas I'd be grateful for your help. I've included a very simplified version of the page to help you picture the problem. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #maincontent { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #CCCCCC; width: 80%; margin-right: auto; margin-left: auto; position: relative; top: 25px; } #envelope { width: 100%; margin-right: auto; margin-left: auto; position: absolute; } #navigationbar { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #0066CC; width: 80%; margin-right: auto; margin-bottom: 0px; margin-left: auto; top: -15px; position: relative; } --> </style> </head> <body> <div id="envelope"> <div id="maincontent"> Main content div variable sized content </div> <div id="navigationbar">Navigation bar the size of this area will be fixed</div> </div> </body> </html> Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? I am sure that you've seen these types of divs/boxes that people use on their webpage. almost everyone uses it pretty much it's a div or a table cell where the cell has background colour and a thin border around it (usually lighter) for a nice effect. Then obviously within the box, there is text to be displayed. I can't seem to get this!! I've tried using tables but what happens is that the border starts overlapping with the other cells and I don't have the effect I won't what's the easiest way of implementing this type of design? thanks! |
|||||||