I need help stretching a gradient background to 100% width (and 31px height) with centered text over it.
Here is the page I am working on:
http://www.ahtwindows.com/asset/
The gray gradient nav bar needs to have a width of 100% for all viewers, with the menu text links on top of it, but centered for 100% width.
Anything you all can do would be great, thanks!
Jump to PostWhat do you mean by width "100%"? Do you mean you want the image to extend to the edges of the browser window, whatever width the user's screen resolution is?
Jump to PostYour tables are going to limit how you implement this a bit - specifically, you have static widths that are going to limit that image's resizing. Also, the image itself is 1200px width, so you'll have some issue with pixelation on very wide monitors.
One simple solution I can …
What do you mean by width "100%"? Do you mean you want the image to extend to the edges of the browser window, whatever width the user's screen resolution is?
Yes, that is what I meant. Sorry if I was unclear. That gradient nav bar background image has a width that would cause the image to repeat itself if the visitor's screen resolution is set very high and with a gradient image - it is usually dark on the outer ends and lighter in the center.
So I need it to remain darker on the ends and lighter in the center, no matter the users screen resolution.
I've been going over this for over 24 hrs.. and can't find a clear cut answer. From what I've read, CSS would be the way to go - but I am not very familiar with CSS and up until now I've used tables to position images and text on a page.
Your tables are going to limit how you implement this a bit - specifically, you have static widths that are going to limit that image's resizing. Also, the image itself is 1200px width, so you'll have some issue with pixelation on very wide monitors.
One simple solution I can think of here would be to simply add your image as a background on body, and position it accordingly. You may want to change the image itself, e.g. make it a simple gradient that is the right height, but a 1px width, and repeat-x. This would give you the dark edges at the edges of your 1200px table, but a simple gradient from there that stretches to the edges of the body.
Not sure if this is the final design idea you have or not, but you can play with this and find the right solution.
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
div
{
margin:0 auto 0 auto;
paddin:0;
}
div.div1
{
width:77%;
background-color:72db31;
}
div.div2
{
width:100%;
background-color:dbd131;
}
div.div3
{
width:77%;
background-color:db4831;
}
p
{
margin-bottom:0;
margin-top:0;
padding:10px;
text-align:justify;
vertical-align:middle;
text-indent:27px;
}
</style>
</head>
<body>
<div class="div1">
<p style="align:justify;">Suspendisse potenti. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum arcu lectus, faucibus lobortis dictum vitae, egestas nec ipsum. Phasellus egestas facilisis dui volutpat commodo. Nullam rhoncus suscipit ipsum id tristique. Integer urna augue, rutrum vitae aliquam sed, convallis in elit. Praesent in ante ipsum. In vitae risus nisl. In hac habitasse platea dictumst. Nunc eu velit elit, id porta sapien. Nullam tempus, nisi sit amet lacinia consequat, lorem purus pretium lacus, vel ullamcorper justo eros non dolor. Etiam sit amet libero odio, at volutpat ante. Phasellus ac lacus eget neque lobortis tempus. Aliquam consectetur faucibus cursus.</p>
</div>
<div class="div2">
<p>Morbi convallis semper dictum. Curabitur suscipit tellus a lacus tincidunt quis ultricies eros posuere. Sed dapibus venenatis arcu non auctor. Morbi quis sem in est sollicitudin tincidunt id in augue. Donec cursus tincidunt felis eu fringilla. Maecenas sit amet enim mauris. Suspendisse potenti. Maecenas euismod, odio vitae aliquet blandit, neque nunc accumsan sem, non pharetra dolor nunc quis felis. Pellentesque gravida cursus blandit. Fusce sit amet auctor velit. Integer sollicitudin euismod magna, eu scelerisque est consectetur nec. In massa lectus, rhoncus sollicitudin volutpat at, aliquam id arcu.
</div>
<div class="div3">
<p>Aenean non libero vel urna feugiat tempus. Quisque scelerisque tincidunt mauris, quis dapibus nunc iaculis nec. Cras ut turpis id diam fermentum dictum. Integer vitae diam nulla, non ultricies mauris. Curabitur in placerat felis. Nam luctus turpis id turpis aliquam rutrum eu quis enim. Curabitur nulla nibh, aliquet id placerat sit amet, sodales sit amet tortor. Fusce nec tortor mi. Suspendisse fringilla mauris in ligula posuere sollicitudin. Aliquam pellentesque rutrum risus a congue. In congue varius lacus, ornare scelerisque arcu elementum ut. Vivamus porttitor dictum semper. Suspendisse ut nisi vitae massa consequat pharetra et at nisi. Duis eleifend aliquet dui et pulvinar. Phasellus et quam ipsum, vitae iaculis est. In hac habitasse platea dictumst. Cras ac risus ullamcorper felis commodo congue eu ut mauris. Suspendisse potenti. Integer vitae viverra ligula. Phasellus ante nulla, tincidunt nec placerat vitae, interdum ac turpis.</p>
<p>Suspendisse imperdiet fermentum orci ac egestas. Pellentesque id sapien odio, vitae ornare ante. Sed pulvinar egestas suscipit. Donec placerat massa et purus fringilla vitae tincidunt nibh elementum. Nunc facilisis justo non nunc scelerisque ac hendrerit arcu iaculis. Sed orci erat, dignissim eu consectetur vitae, varius eu leo. Sed eget nulla magna. Integer sit amet sem turpis. Duis et vestibulum velit. Fusce nisl libero, pretium nec dictum ac, sagittis at eros. Aliquam accumsan massa eu lorem tincidunt eget cursus diam placerat.</p>
<p>Proin sit amet nunc eros, in rutrum nibh. Vestibulum a ante elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc tempor neque a augue interdum tristique. Etiam pellentesque euismod dolor, a dignissim diam ullamcorper eget. Integer suscipit ultrices ipsum, vitae vestibulum turpis sodales et. Integer bibendum diam ac urna euismod eu rutrum felis ullamcorper. Donec ultrices iaculis hendrerit. Fusce nec tortor a diam mattis porta. Phasellus quis felis sapien. Aliquam erat volutpat. Proin consectetur orci auctor dolor porttitor a sodales arcu hendrerit. Aliquam erat volutpat. Suspendisse ut urna erat, sed sagittis massa. Praesent lobortis dui at erat sagittis aliquam. Maecenas vitae pretium libero. Proin massa augue, dictum id commodo vitae, sagittis nec lectus. Proin lobortis eleifend augue ut scelerisque. Suspendisse ut lacus vitae augue scelerisque consectetur ut ac nisl. Aenean et fringilla turpis.</p>
</div>
</body>
</html>To stretch gradient image use css property width:
<div style="background-image:width:100%;">rather than cracking yr brain for all this stuff, wont it be easier to just have a fixed table?
I already have the page setup in tables of 1200 pixels wide. I just wanted to find a way to have that nav bar stretch out to 100% for all computers, regardless of screen resolution.
<SCRIPT LANGUAGE="javascript">
var width = screen.width
</SCRIPT>
then pull the value over.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.