|
CSS - Having Trouble With Laying Out Bg Images.
Can someone please explain this to me.
Here is the HTML coding I'm using. <body> <div id="container"> <div id="content"> </div> </div> </body> When I use this CSS: #container { width: 100%; height: 100%; } #content { float: right; width: 80%; height:500px; background-color:#FFFF00; background-image:url(toprighttemple.gif); background-repeat:no-repeat; background-position:top left; } The image shows up just fine. BUT, If I move the background image lines (the last three lines in the content ID) then the image doesn't show up at all. I'm just trying to get a better understanding about how CSS works. It's hardly as straight forward as I had hoped >< Thanks all. Similar TutorialsHi, I'm having an issue with the image not laying out properly. Please go here http://sixtwentyfour.com/ See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction? Thanks. Hi, Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it. Here's a preliminary screenshot of my site in jpg. format, thanks. http://uberserver.ath.cx/~rohan/PS1.0.jpg Here's the main site (v.2.0) if you're interested. http://www.ubertropolis.tk Thank you! Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. I'm having a problem where my submit button isn't floating over to the right inside of the div. It's supposed to be inside of the "test" div, but it's just below it. I thought that if I floated an element it would expand the parent element when necessary. What am I missing? This is just a test snippet I was working with to get this functionality to work correctly. Is there a different way I should be trying to achieve this? I've got a form that I'm floating the labels to the left so they lineup properly with their related input. I then want to float the submit button over to the right of the form, but that's when it jumps outside of the div just below it. Code: html <div id="mainT"> <div id="test"> <h4>Enter New Values and Submit</h4> <label>ID: </label>#URL.system# <input class="submitT" type="Submit" value="Submit"> </div> </div> Code: css
div#mainT{
border:1px solid #CCC;
margin-bottom:25px;
width:600px;
padding:10px;
font-size:10px;
color:#000;
background-color:#EEE;
}
div#mainT input.submitT{
/*margin:0 0 0 15px;*/
float:right;
}
div#mainT label{
width:120px;
float:left;
/*margin:0 0 0 15px;*/
}
div#test{
border:1px solid red;
}
Code:
<div class="message">
<table>
<tr>
<td>Hello World</td>
</tr>
</table>
</div>
Code:
div.message
{
border: 1px solid #000000;
}
For some reason that does not produce a border around the div. Is there a reason why not? Hello, this is my first time here so not really sure how to ask for help so i am just going to poste the html/css code here and say what i want to say and hope no rules will be broken This is the body of the html: <body> <div id="wrap"> <div id="logo"><img src="images/logo.jpg"/></div> <div id="header"> <ul> <li id="home"> <a href="#"><img src="images/home_button.jpg"></a></li> <li id="about"> <a href="#"><img src="images/about_button.jpg"></a></li> <li id="fun"> <a href="#"><img src="images/fun_button.jpg"></a></li> <li id="gallery"> <a href="#"><img src="images/gallery_button.jpg"></a></li> <input type="text" name="s" id="s" value="Start search" /> </li> <li id="search"><img src="images/search.png" alt="search" /> </ul> </div> <div id="main"> <div id="primary"> <div class="post_item"> <h2> My First Post</h2> <p class="meta"> 1/4/2020 Insp </p> <p> This is text This is text This is text This is text This is text </p> </div> </div> <div id="secondary"> <div class="secbox"> <h3>News</h3> <img class="featuredImage" src="images/left.png" alt="Left" /> <p> Left arrow </p> <div class="prevNext"> <a href="#"><img src="images/right.png" alt"More"/></a> <a href="#"><img src="images/left.png" alt"Less"/></a> </div> <div class="secbox"> <h3>Recent Stuff</h3> <ul> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> </ul> </div> </div> </div> </div> <div id="footer"></div> </div> </body> And this is the css: a:hover {text-decoration:underline;} input{background:#696969; border:1px solid #c3c3c3; color:#cbcbcb; paddind:3px;} input:focus, input:hover{background: #ededed; color: #4e4e4e; } /* MAIN STYLES */ body{background:red url(images/bg_main.jpg) repeat-x;} #wrap{width:1000px; margin:auto; } #header {background: url(images/bar.jpg); width:100%; height:50px; float:right; } /*Navigation*/ #header ul{overflow: hidden; padding-left: 30px;} #header ul li{float:left; padding-right: 15px; } #header ul li a{color:#cbcbcb; position:relative;} /*SEARCHBOX*/ #header ul li#search{float:right; padding-top:10px;} #header input{margin-left:230px; margin-top:15px;} /*MAIN CONTENT*/ #main #primary {float:left;width:600px;} #main #secondary{float:right; width:180px;} #main #primary .post-item{background:#ededed; margin-bottom: 28px; border:1px solid;} Now, basically what i am trying to do is set the width of the "#header" to 100% but it seems to be stuck at 1000px ...won't go over that. can someone please help Hey guys I have a page I am working on and I am running into a little problem. I created a navigation bar using css and now I want to link up the navigation bar. The problem is when I link it it turns it to a blue hyperlink. I know I can change the css to get rid of that, but I also want part of the page to look like and be set up like a regular blue hyperlink. How can I get around this. Here is the page I am working on (URL address blocked: See forum rules) I want the positive and negative tests to be normal hyperlinks but I want the nav bar to stay in the css I set up thanks for the help Sean Hi, I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
i have a small image in a big div, and when one rolls over any part of the image or the div the background color of the div changes and the image swaps out. i dont know why, but im having a hard time getting this done. i feel like its simpler than i am envisioning it. any help would be much apreciated. ben Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content example of what it looks like: Navigation | | link | link | link | Example of what i want it to look like Navigation | | link | link | link | | | | | | bottom of page. This is the Css code: DIV#sidebar { LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed; } after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code. Code:
<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>
hi I have this.. http://www.thehundreds.com/thewall/index.php as u can see the threads to the right are acting up once the float of the login is done, because the height is not the same.. is there anyway to force the threads div to continue to line up, or better yet, have that div to the right of the login without using a float?? Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="testcss.css" /> </head> <body> <div id="wall2"> <a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) --> </div> </body> </html> And the css.... Quote: body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;} a{color:blue; border:0; padding-bottom:0px; padding-top:0px;} a:hover{color:#DE7008;} img { border:0; padding-bottom:0px; padding-top:0px;} div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; } img#unsold {border:0px; padding:0px; margin:0px;} The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row. Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers. The code is XHTML and CSS validated. Gareth. http://lovemeforme.org/ang/ I realize it's because of the float: right and float: left, but I put it in a container with a set width, but it's made no difference. I can't put a margin-left/margin-right to them because the layout is centered and it won't work on other resolutions.. hmm, any ideas? Thanks! |
|||||||