|
CSS - Making Background Prepeat With An Offset
I need a 100px header (white) at the top of the page, with the rest of the page being #000033.
I am really new to CSS, so there is what me and an editor came up with. Code:
.BODY {
background-image: url(block.jpg);
background-position: 0px 100px;
background-repeat: repeat;
}
The probelem is that the postion doesn't seem to matter when the repeat value is set to repeat. I am sure there is an easier way to do this. Can someone help? thanks Kris Similar TutorialsI have two issues: 1. I have been trying to make a habit of validating my stuff and when I tried to validate my page, I get these errors: Quote: 1. Error Line 31 column 64: end tag for "img" omitted, but OMITTAG NO was specified. ..."index.htm"><img src="images/logo.gif" alt="ICOM"></a> You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". ✉ 2. Info Line 31 column 23: start tag was here. <a href="index.htm"><img src="images/logo.gif" alt="ICOM"></a> 3. Error Line 36 column 89: end tag for "img" omitted, but OMITTAG NO was specified. ..."images/index_img.jpg" alt="ICOM"></a></div> ✉ 4. Info Line 36 column 43: start tag was here. ...iv id="indeximg"><a href="about.htm"><img src="images/index_img.jpg" alt="ICO I don't know what this means. 2 (and the primary reason for posting this). I made a page and I have a footer that I want to keep at the bottom of the page regardless of whether the page stretches down that far. In Firefox, it works great. In IE, the footer looks like it moves to the left about 50% and then proceeds to stretch the page 50% more off to the left. My site is: www.icomministries.com My CSS file is: www.icomministries.com/style.css If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list... BTW, the CSS is http://jordanmeeter.com/new/includes/x.css. In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset? I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks I was just wondering if there was a standard that most people use. Or do you just use each as the circumstances require? I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
i have this site here and am looking for a solution to my css for resizing the window i need the .swf to appear underneath the main content box. any ideas?! i need to it to behave exactly like the .jpg on this page here anyone!? How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th> [html] <thead> <tr> <th scope="col" class="twentyfive">STATUS</th> <th scope="col" class="twentyfive">VIEW</th> <th scope="col" class="twentyfive">DOWNLOAD</th> <th scope="col" class="twentyfive">TOTAL</th> </tr> </thead>[/html] Do I need to add something like this? [css] table.main thead tr th.twentyfive { /*border: 1px solid #fff;*/ width: 25%; } table.main thead tr th.twentyfive.right { /*border: 1px solid #fff;*/ width: 25%; float: right; }[/css] Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks http://m2-klan.com/nuked.html How would I go about making this page all Css/div? My friend has been saying something that I can make that from all Css with less graphics, how would I go about doing that? I am a newbie at Css and I would like to know how to do that, instead of tables. i thought i had finally gotten my design to where i wanted it, but then i tried it in internet explorer. he http://beta.bikerevolution.org/xindex.php any ideas on how to fix this would be great. Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance |
|||||||