|
CSS - Simple But Extreamly Time Consuming Problem.
Reccently i learnt how to create rollover links, i was very excited as usually my links are boring and dont do anything when you roll over.
I started with the usuall: bodya: link { }, this made ALL the links on my page do the same effect, however i wanted 3 diffrent link effects that i could set on diffrent parts of the text. the style .smallgreen tells the link to have no text decoration untill "hover" and "visited", same goes for the styke .headerlink. .SmallGreen { Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman; color: #00FF00; font-size: 20px; text-align; left; } .SmallGreen a:link { color: #00FF00; text-decoration: none; font-size: 20px; } .SmallGreen a:visited { color: #00FF00; text-decoration: none; font-size: 20px; } .SmallGreen a:hover { color: #00FF00; text-decoration: underline; font-size: 20px; } .SmallGreen a:active { color: #00FF00; text-decoration: underline; font-size: 20px; } .HeaderLink { color: #FF0000; Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman; text-align: center; font-size:25px; } .HeaderLink a:link { color: #FF0000; text-decoration: none; font-size: 25px; } .HeaderLink a:visited { color: #FF0000; text-decoration: none; font-size: 25px; } .HeaderLink a:hover { color: #FF0000; text-decoration: underline; font-size: 25px; } .HeaderLink a:active { color: #FF0000; text-decoration: underline; font-size: 25px; } Similar TutorialsHi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules. I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it. I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following The html for each area is: <div id="homePageTopicArea"> <ul> <li> <a href="workshops.html"> <img src="images/homePage/topic1Image.jpg" /> <div class="homePageTopicTextHeader"> <h1>Inspiring Workshops</h1> </div> <div class="homePageTopicText"> <p> This range of clear .......... </p> </div> </a> </li> and the CSS is #homePageTopicArea { height: 100%; width: 734px; margin-top: 10px; margin-left: 280px; } #homePageTopicArea ul { list-style-type: none; width: 734px; padding-left: 0px; margin-left: 0px; } #homePageTopicArea li { outline: none; border: 0; margin-top: 15px; height: 145px; } #homePageTopicArea li a { display: block; height: 145px; outline: none; text-decoration: none; } #homePageTopicArea li a:hover { background-color: #AEB8CB; } This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code. If you click on the refresh button the page always displays correctly. Can anyone explain this behaviour? I have screenshots but dont know how to attach them. Thanks in advance! Fairly straightforward problem: I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div. Anyway to set the content as fixed and just have the user scroll if the browser is too small? Thanks! Ohh.. and both divs the "blankDiv" and "header" are floated left... Code: #blankDiv{ width:10%; background-image:url("../images/header_tile.png"); background-repeat:repeat-x; height:224px; float:left; } #header{ float:left; }
I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this click here When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? San I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem: img386.imageshack.us/img386/1795/ddddye5.png As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS: Quote: #maincontentleft { float : left; width : 252px; height: 100%; background-image : url("images/sidecontentbg.gif"); } #sidecontentbg { background-image : url("images/sidecontentbg.gif"); padding-left : 15px; padding-right : 15px; height: 100%; background-color: red; } #sidecontenttop { background-image : url("images/sidecontenttop.gif"); } #footer { padding-top: 5px; padding-bottom: 5px; background-color : #ebebeb; height : 35px; border : 1px solid #dbdbdb; text-align : center; } The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom. Quote: I just started working with CSS again, and I'm having problems coding my layout. The problem is he I'm testing on Firefox. div#wrapper is the problem. EDIT well, after playing with it some more, I have found out that this has no pattern to it at all, its pretty much just producing random results, so infinitely STUPID!!! Seriously. This is something that is so simple, and yet these idiots who come up with this crap make it so difficult. If you want to pad left and right, it shouldn't be this goddamn difficult. Sorry, I'm VERY pissed now, after working on something so basic for so long. I can only get a padding on the right for so far, and then it skips over to completely aligning to the right, while the left is so much farther over, even if it has smaller padding... what the hell. Heres the full code: index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Elemental Concepts</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="upperwrapper"> <div id="banner"></div> <div id="memberswrapper"> <div id="members"> </div> <div id="membersfooter"></div> </div> </div> </div> </body> style.css Code:
body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div#wrapper {
width: 700px;
margin: 0 auto;
padding: 0px 50px 0px 25px;
text-align: left;
background-image: url('mainbg.jpg');
height: 100%;
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background-image: url('banner.jpg');
}
div#memberswrapper {
float: right;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background-image: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
div#wrapper, is the main div, which has a background. I need the insides spaced about 15 px from the left, and 15 px from the right. But for whatever reason, it usually ends up spacing 25 px from the left, and 5 from the right, the more I play with the numbers though, to get the results I want, the more obscure it becomes... it just WILL NOT do what I want, and WILL NOT follow any logical pattern with how it display. Help is really appreciated. I am completely and utterly lost... EDIT 2: Still working on it, and no progress, except the background image keeps disappearing every time I even think about touching the background attribute! I'm about to say **** it, and use tables. This is ridiculous. I just opened up IE6, and it looked even more obscure than it does in Firefox. This makes no sense. I just read a few tutorials on div padding, doesn't mention anything about this. Maybe its the floats causing the problem... but I don't see why elements on the inside could stretch the containing element, if it has fixed size and padding, and that still doesn't explain the IE6 problem's, which I'm not even going to get into now... since I have probably confused you enough already. I seriously think I could write an entire HTML/ CSS parsing engine, in any language, in less time than it would take me to code this layout properly in HTML/ CSS. Ridiculous. Well, I got the top working in Firefox, instead of floating left and right, the banner and memberswrapper, I floated one left, and the other had a left-margin. Though, I am almost 100% sure, the text, and other divs below are not going to align properly, with the edges of the above [banner and memberswrapper]. I am also afraid to see what this looks like in IE6. style.css Code: body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div {
margin: 0;
padding: 0;
}
div#wrapper {
width: 725px;
margin: 0 auto;
padding: 0 25px 0 25px;
text-align: left;
background: url('mainbg.jpg');
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background: url('banner.jpg');
}
div#memberswrapper {
margin-left: 477px;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
Edit Again: Looks just as bad as it did before, in IE6. The background image repeats horizontally, which it should have absolutely no reason to do so, the width is 50 pixels less than the images width, and the padding on the left and the right, are each 25 pixels, accounting for the full image size... and yet the full image and then some is displayed. If screen shots would help, I can take some. Or if you want to see what an impossible layout to code looks like, I can send you a zip of everything. Theres 2 options left, tables or absolute positioning. I'm using dreamweaver to work on a basic example that I seem to have working fine. However I've uploaded it onto the server and it's coming out as if there was no styleing at all applied inclucing colour. I've showed an example of both the site and code if anyone can help. I should have a load of colums and rows, like tables, wit text in them but all I seem to see is just words laid out with no styling attacted to them......God I've forgotten how awkward code can be at times. Below is the link. http://ballyviewbuilders.com/Centering.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>Untitled Document</title>
<style type="text/css">
div.wrapper
{
width: 750px;
margin: 0 auto;
text-align: left;
}
div.1a
{
float:left;
width:190px;
background: FFFF00;
color:000000;
padding: 10px;
}
div.1b
{
float:left;
width:190px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1c
{
clear:both;
background: EEEE00;
width:400px;
padding: 10px;
}
div.1d
{
float:left;
width:80px;
height:40px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1e
{
float:left;
width:10px;
background: DDDDDD;
color:000000;
padding: 10px;
}
</style>
</head>
<body>
<div class= "wrapper">
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a </div>
<div class ="1a">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1d">gfgdfg</div>
<div class ="1d">gfgdfg</div>
<div class ="1e">g</div>
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
</div>
</body>
</html>
For some reason, a layer that is marked z-index:0 is coming up above a layer I have marked z-index:100. The problem is only occurring in IE (works fine in Firefox, etc.). I've dumbed the code down to get to the bare bones of it. The sample is he http://www.davidaskitchenandtiles.com/test.php You can see the code via view source or below. Note that the text "Z-index 0 (or not defined)" is on the z-index:0 layer, so it should be under the white layer, which is z-index:100. This is the case in Firefox, but the text runs over it in IE. Thanks so much if you can let me know why this is. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="0" cellspacing="0" border="0" width="300"> <tr> <td width="300" height="200" bgcolor="blue"> <div style="position:relative"> <div style="position:absolute; background-color:#ffffff; top:50px; left:15px; width:200px; height:300px; display:block; z-index:100;border:2px solid green; overflow:hidden"> z-index 100 </div> </div> </td> </tr> <tr> <td width="300" height="200" bgcolor="red"> <div style="position:relative; z-index:0"> Z-index 0<br>(or not defined) </div> </td> </tr> </table> </body> </html> I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b> Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>
Hi Everyone. Apologies if this problem has been posted before or if it's simple - I'm very new to CSS! I'm having some problems inheriting text size from a class in a table. I have a table that inherits from a class (clsRoundCornersTable below) that specifies that text size should be 12px. This works fine except when I have another table defined within my original table which has text at the default size. I'm assuming that my sub table is not inheriting from the parent but instead is using the <TABLE> definition below but I thought that text size would filter down. Can anyone help???? TABLE { border-width:0px; border-style:solid; width:100%; text-align:left; } TR { border-width:0px; border-style:solid; } TH { vertical-align:top; border-width:0px; border-style:solid; } TD { vertical-align:top; border-width:0px; border-style:solid; } .clsRoundCornersTable { border:0px; padding:0px 0px 0px 0px; width:100%; background-color:whitesmoke; font-size:12px; } Hi, Here's my problem: css Code: Original - css Code <div style="width:69%; text-align:center; float:left;"> <div style="width:80%; min-height: 98px; border: black thin solid;"> BLEH </div> </div> <div style="width:30%; text-align:center; float:right;"> RIGHT </div> <div style="width:69%; text-align:center; float:left;"> The above code, should in theory make two "cells", one on the left and one on the right, side by side. Within the left one there should be another box, aligned centrally. This is fine in internet explorer, yet in Firefox & similar browsers it refuses to do this - I'm sure this is something very simple. Many thanks, Alan Please refer to the following web site: h*t*t*p://alturl.com/iio4 As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop). I don't want it to however appear at the end of the last link (shop). I have tried several things but can't seem to get the CSS to remove it just after the last link. Any help with this would be greatly appreciated. Following is both HTML and CSS code: Code: <div id="navigation"> <a href="/about" class="navigation-about">About</a> <a href="/events" class="navigation-events">Events</a> <a href="/teams" class="navigation-teams">Dance Teams</a> <a href="/shop" class="navigation-shop">Shop</a> </div> Code:
/***** Navigation *****/
#navigation {
background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/
.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
float: left;
display: block;
padding: 0 0 0 12px;
font-size: 105%;
}
#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px;
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}
Thank you once again! If possible.. pleaseeeee provide a working CSS so I do not misunderstand you. ok, so after i click a link it goes to the css visited link. .menu_1a a:link {color:#666666; text-decoration: none;} .menu_1a a:hover {Background: #666666; color:white;} .menu_1a a:visited {color:#666666; text-decoratoin: none;} is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link any ideas? -kevin I'm trying to create a very simple navbar with css rollovers. I made one based on a tutorial on the macromedia website but it's not quite right (in Internet Explorer anyway) If you have a look here you can see what I want it to look like: http://www.eveythingfree.buildtolea...ieds/index2.php Now here is my attempt: http://www.eveythingfree.buildtolea.../whynotwork.php It looks fine in Mozilla but in IE the right hand side of the table doesn't exist (there is no 1 pixel black line). What have I done wrong? Heres the css properties: Code: .button a {
background-color: #e9e9e9;
border: 1px solid #333333;
display: block;
text-decoration: none;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
}
.button a:hover {
background-color: #DDDDDD;
border: 1px solid #333333;
color: #CC0000;
text-decoration: none
}
Can anyone spot it? Unlike in the design I'm trying to replicate, I want to have 1px lines dividing the links. This works in the 2nd example except for the problem on the right. I really hope someone can shed some light on all this. Thanks in advance, Robert Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor I'm working on a little project here, trying to design a table-less page using XHTML and style sheets. The first version worked only in IE, Mozilla and Opera didn't display them the way I wanted to. So I rebuilt the stylesheet from scratch with cross-browser compatibility in mind and it sort of works in all three browsers, except for one little bit: http://gosh.ex.ac.uk/~cs01kb/lg_sample/ Stylesheet: http://gosh.ex.ac.uk/~cs01kb/lg_sample/css/main.css IE6 and Opera 7 correctly display the little bar at the bottom with all the links, but Mozilla Firefox 0.8 doesn't - it displays it under the two main content boxes. I'm just out of ideas on how to try and make it work, it should be so simple. Any help on how to get around it would be appreciated. P.S.: If you're using any other browser out there (especially on a Mac) just a quick note or a screenie of what the page looks like would be nice... thanks! Hi, Small problem he http://www.salewhale.com/z.html The box with the "What would you like to do?" is as follows: Code: <div class="boxarea"> <div class="boxarea_left"><b>What would you like to do?</b></div> <div class="boxarea_right"><a href='3_changepass.php'>Change Password</a></div> </div> The CSS for this is: Code: .boxarea {
border: 1px solid #0000FF;
background-color: #F5F5F5;
padding: 2px 2px 2px 2px;
}
.boxarea_left {
width: 140px;
float: left;
}
.boxarea_right {
width: 300px;
}
The point is to have the left column (boxarea_left) as 140px, so that the text wraps to the next line. Does anyone have any idea why the border box doesn't really take account of the new line? It simply ignores the divs and has a basic one line height. Of course, if I put a spacer within the boxarea div, the problem will be solved - but this leaves a gap at the bottom of the box - which I dont want. Is there a simpe fix? Thanks very much! 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! Hi all, Basically I want to position a footer at the very bottom of my page which is 100% in width. So far I have: Code: .linkbar {
display:block;
background-color:black;
position:absolute;
height:100px;
width:100%;
bottom:0px;
left:0px;
}
.picturebox {
display:block;
background-color:blue;
position:absolute;
height:50px;
width:50px;
bottom:0px;
left:0px;
}
This is what I have so far and I geta reasonable result in IE but nothing at all in firefox, the box doesn't even appear. Any help would be greatly appreciated! Regards, Jack. I'm having troubles figuring out how to lay out the beginnings of a simple page using div's and css. The html is simple. I have a container that I want to be horizontally centered but I want it to stretch from the top to the bottom of the page. Inside this container div, I want a header div containing a header and an image next to each other. Underneath that div I want a nav bar. The problem is that the nav bar and the header bar are on top of each other AND the container won't stay flush with the top and bottom of the browser window unless I use huge negative margins. Code:
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<img src="images/myimage.jpeg"/>
</div>
<div id="navbar">
</div>
</div>
</body>
Code:
@charset "utf-8";
body {
background-color: #022000;
}
#container {
background-color: #0B400A;
height: 1000px;
width: 970px;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
margin-bottom: -20px;
}
#container #header img {
float: right;
}
#container #header h1 {
font-size: 100px;
color: #FFFFFF;
float: left;
}
#container #navbar {
background-color: #022000;
height: 200px;
width: 920px;
border: thin solid #33FF00;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
|
|||||||