|
CSS - H2/div Background Colour Bleeding
Hi all,
the page i am talking about is... http://sydneynightowl.com.au/home.php The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds. The div and header should be starting after the first 3 divs (which are set to float) I hope i have explain this correctly, any help is apriciated. The css code is Code: @charset "utf-8";
/* CSS Document */
body {background-color:#000000;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center top;
color:#FFFFFF;
font-family:"Lucida Sans Unicode", sans-serif;
font-weight:100;
font-size:12px;}
#container {
position:absolute;
width: 700px;
left:50%;
margin-left:-358px;
}
#header {
margin-top:0px;
height: 115px;}
#toolbar {height: 30px;
line-height:10px;
padding: 0px 10px;
font-variant:small-caps;
}
#cornerlogo {
position:fixed;
top:5px;
left:5px;
}
#topnavigation {height: 35px;
line-height:35px;
text-align:center;}
#content { border-bottom:1px;}
.3column {width:695px;
padding-right:5px;
padding-left:5px;
margin-top:5px;}
#leftcolumngl {float:left;
width:223px;
height:370px;
padding-right:5px;
padding-left:5px;
padding-top:5px;
margin-top:15px;
margin-right:5px;
border:#FFFF00 solid thin;}
#middlecolumngl {float:left;
height:370px;
width:225px;}
#rightcolumngl {float:left;
height:370px;
width:230px;
padding-left:5px;}
#leftcolumn { float:left;
width:230px;
padding-right:5px;}
#middlecolumn {float:left;
width:230px;}
#rightcolumn {float:left;
width:230px;
padding-left:5px;}
#imagecolumn {float:left;
width:340px;
padding-left:5px;}
#infocolumn {float:left;
width:340px;
padding-left:5px;}
#footer {height: 30px;
border:thin solid #FFFFFF;
clear:both;
text-align:center;
margin-bottom:30px;
margin-top: 30px;
line-height:25px;}
#bgfirst {
position:absolute;
top:190px;
left:0px;
width:90%;
height:200px;
margin-bottom:20px;
background-color:#00CC00;
}
#bgsecond {position:absolute;
top: 400px;
right:0px;
width:90%;
height:200px;
background-color:#660066;
}
a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}
a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}
a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}
h1 { text-align:center;
color:#000000;
background-color:#fffc00;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:22px;}
h2 {text-align:center;
color:#fffc00;
background-color:#333333;
margin-left:3px;
margin-right:3px;
font-variant:small-caps;
font-size:18px;}
.ourprice {
display:inline;
color:#FF0000;
line-height:20px;
font-variant:small-caps;
font-size:14px;}
img {
border-color:#fffc00;
border-style:solid;
border-width:thin;
}
img.noborder { border:none;}
img.venues {float:left;
margin:10px;}
.mainnavimages {
border-color:#979700;
border-style:solid;
border-width:thin;
}
p {line-height:15px;}
strong { color:#fffc00;}
Similar TutorialsHey Guys, I have validated both my html and css. The only errors that come back for my css is that I have the same colour background and whatnot. BUT that's what I want. So there aren't really errors. Here is my page: jacenta.com/whichsbc What I have been attempting to achieve and been utterly failing is: If you goto the menu on the side and hover over you will see a light grey background show up. Basically I want that to extend to ethier ends of the box. Is there anyway for this to be done??? I've tried everything and I just can't seem to figure this one out. A good example of what I am looking for is in my drop down menu at the top when you select a heading and a dropdown comes down, hover over an item and a light blue background will show up. It's probally something simple... I know. But ahh. It's just so frusterating! If someone could help me out I would apperciate it so much! You all are such a great help. - Jacenta Is there a way to get it so that if images dont load, then it shows a background colour I tired using both colour an image, but it didn't work Code: background: url(images/background.png); background:#000000; The reason i'm asking is when i'm at college, i have images disabled, and because i used white text, i have to highlight the text in order to read it Is there a way to do this Hi there, I was wondering how I would go about creating input fields have a different colour background when teh user has clicked on it and ins typing. I tried using :active, bit it didn't work. Any ideas? I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too Hi there, I have a text field which I would like to change colour on hover. Any ideas how I would do this? I tried using a class with a:hover but it didn't work. Thanks! I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page). I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on. Code: <a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>
And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color. any ideas? Thanks Hi all, I would be very grateful if someone could help me out with a coding problem. Basicaly, I have two columns and I want both to fill with the background colours with the same height. My sample coding is below. (NOTE: Ive had to remove the urls from the DOCTYPE and <html>, please replace with correct code). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml" > <head><title>100% Height CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #all{ WIDTH: 950px; PADDING-TOP:0px; MARGIN: 3px auto 0px; POSITION: relative; BACKGROUND-COLOR: #fff; FLOAT: left; } #leftside{ FLOAT:left; WIDTH:169px; MARGIN: 0px; PADDING: 0px; BORDER-RIGHT: 1px solid #999; POSITION: relative; BACKGROUND-COLOR: #ededed; } #rightside{ BORDER: 0px solid #000; WIDTH:775px; FLOAT:left; POSITION: relative; MARGIN: 0px 0px 0px 5px; BACKGROUND-COLOR: #F4CDD8; } </style> </head> <body> <div id="all"> <div id="leftside">a<br>b<br></div> <div id="rightside">c<br>d<br>e</div> <div> </body> </html> In the above example I would like the "leftside" div to stretch to the same height height as the "rightside" div filling the area up with the "leftside" background colour and also extending the 1px border. All help much appreciated. Thanks Soph Essentially I'm creating a 'drop-up' menu without javascript. Here is my test page: http://38.99.165.179/kalle/cssmenu/index3.html PROBLEM: I am using 'float: left' to arrange my main menu items horizontally. With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears. Why is this happening? This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left. Here is my code: Code: <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" />
<title>Test</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #555555;
color: #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 100%;
height: 80%;
text-align: center;
}
/* MENU BAR */
#menu_container {
width: 100%;
margin: 0 auto;
/* doesn't work!!! */
background-color: #CC6666;
}
#menu {
font-size: 16px;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
}
#menu ul {
}
#menu li {
position: relative;
display: block;
height: 1.2em;
margin-right: 50px;
text-align: left;
/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?
float: left;
/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */
}
#menu li ul {
background-color: #BBBBBB;
position: absolute;
bottom: 1.2em;
display: none;
list-style: none;
width: 110px;
padding: 0px;
}
#menu li:hover ul {
display: block;
white-space: nowrap;
}
#menu li:hover ul li {
display: block;
}
#menu li:hover ul li:hover {
background-color: #777777;
}
/* END - menu bar */
#bottom {
margin-top: 70px;
height: 150px;
text-align: center;
clear: both;
padding-top: 2px;
background-color: #222222;
}
</style>
</head>
<body>
<div id="top">
content
</div>
<div id="menu_container">
<ul id="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Anything</a></li>
<li><a href="#">Needed</a></li>
<li><a href="#">Here?</a></li>
</ul>
</li>
<li><a href="#">Something 1</a>
<ul>
<li><a href="#">Imagine</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Possibilities</a></li>
<li><a href="#">of Magic!</a></li>
</ul>
</li>
<li><a href="#">Something 2</a>
<ul>
<li><a href="#">Taste</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Sensation</a></li>
<li><a href="#">of the Bubbles</a></li>
<li><a href="#">on your Tongue!</a></li>
</ul>
</li>
<li><a href="#">Something 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="bottom">
content
</div>
</body>
</html>
I have customized the elements of a form for a website I am working on. I have set the input fields to have a white background, however, in three out of the six textfields the background is yellow (this only happens in Internet Explorer 6). I have checked the CSS, and the yellow isn't included anywhere. If anybody can help I would be grateful. Thanks. Can anyone tell me how to change the background colour of all tooltip texts on a web page? Cheers. Dear all, I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments. Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads. If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background. Is there any way around this? Many thanks, Mark Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox. It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK. The sections are Core Details Features Description Contact/Shipping/Payment Promotion Brief example <div> <h2>Core</h2> content bla bla bla </div> <div> <h2>Details</h2> content bla bla bla </div> The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up. Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail. http://quotes.cybercon.net/classifiedsform.html Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section. http://quotes.cybercon.net/classifiedformIE.jpg http://quotes.cybercon.net/classifiedformFF.jpg Thanks! -Jason Hello, I have [almost] successfully added CSS tooltips to a conference agenda and have an issue where links are "bleeding" through the tooltips. I think it has something to do with the way the links and tooltips are positioned. For example, I have a table cell with 2 links in it like this: <p><a link>Link1<span>Tooltip1</span></a></p> <p><a link>Link2</a><span>Tooltip2</span></p> The spans are hidden until hovered over, using a display:none to display:block switch. The links are positioned relative and the blocks are positioned absolute. The behavior I'm seeing is that Link2 will "bleed" through the tooltip block, obscuring the text in the block. I've tried a couple of other positioning strategies and using z-index with no improvement. Can someone have a look and see if you can help? Visit http://www.tipsweb.com/about/events/conference2007/agenda_new.asp And mouse over the Brazos 2 session links from 1:00 pm - 2:30 pm on Tuesday April 17th. Thanks! Chris Well here is my problem... I'm trying to do a fluid design with complete css. All is fine, however when I view my page I can't get the content to fill an entire area. I tried to use a width:100% but that stretches it way too much and it goes over the container div. What I want is for it to go the container div but not over, is there any way I can do this with the current layout? I would post the code but tis a lil big so would be easier to just direct you to my site. I have tried many different thing but to no avail. Any help would be greatly appreciated. TiA -BoNfiRe Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Is it possible to set the colour of the padding in a table cell? I'm having trouble with my list on a site im working on. When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text. You can see the menu, on the left hand side - HERE. Here's the CSS of the list. Code: div #leftcontent {
padding-left: 0px;
padding-top: 0px;
display: block;
font-size:90%;
font-family:Arial, Helvetica, sans-serif;
}
#leftcontent a {
text-decoration:none;
padding:0px;
color:#000066;
}
#leftcontent a:hover {
text-decoration:none;
background-color:#66CCFF;
background-color-width:30px;
}
#leftcontent ul{
margin: -10px 10px 2px 5px;
padding: 0;
list-style: none;
}
#leftcontent li a{
margin: 0 0 .5em 0;
padding: 2px 5px 5px 0px;
line-height: 1.4em;
font-size:100%;
color:#FFFFFF;
}
Any help is appreciated. Cheers. __________________ ULTRASUK Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? |
|||||||