|
CSS - Cannot Get Block To Span Width Of Page
Hello,
I am having a problem getting the section that says WHAT OUR CUSTOMERS HAVE TO SAY to span the entire right side of the page. I would like to set it up so that no matter what screen resolution the page is viewed in, that section will stretch all the way to the right side. Any suggestions? http://www.discinsights.com/cyber/Scripts/default.asp Thanks ahead of time! Similar TutorialsI don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference. I'm taking this plunge because I'm ready to rip hairs one by one on a problem. I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document. Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution. What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time. Code: <STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>
<DIV class="banner"><IMG SRC="images/vbar.PNG" WIDTH=900 HEIGHT=93 BORDER=0></DIV>
The above works but its a fixed width and I would like it to be full width no matter what resolution ones using. I have tried making the Div class="banner" use a width=100%. This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away. I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me.. Thanks in Advance Me I am a 3week knewb to css. I was wondering if anyone could explain to me when I would use: div or display:block div or span span or display:inline thank you Hi all, I've got a problem on my hands. I've been restructuring the site I work on from their FrontPage code to complete XHTML + CSS. I always thought that by using span's that I could make a block level element display inline, but keep all of it's block level uniqueness, such as height and width and other items, but would display right next to other elements. Works great with headers and such but not with boxes. I created a 4 <span> system inside a centered div, figuring they'd all work. But span's don't keep their block level uniqueness, so nothing displayed at all! I fixed 3 of these 4 by putting their background images inside the spans, which I wanted to avoid, but it works so I won't complain on that. Now I have this. Code: <div id="bigdiv"> <span id="maptop"><img src="images/2004/new_main_front/wel_left_top.jpg" alt="Welcome!" /></span><span id="feattop"><img src="images/2004/new_main_front/feat_right_top.png" alt="" /></span><br /> <span id="mapbot"><img src="images/2004/new_main_front/wel_left_bot.jpg" alt="" /></span><span id="featbot">This is where things will go.</span><br /> </div> Span id featbot has no images, it has a repeat-x background so that I can place and change text in there at will. Because of this, and it being a span, it wraps only to the size of the text, which isn't good. I found a display: inline-table (displays as a table, but inline, pretty obvious), which works great in Safari for OS X, but not in IE 6 or Firefox on Windows. How would I structure this correctly so that it actually does work? Here is an image showing the design and how it's set up (ignore the gradients, they're not being used). As you can see where featbot is, that's where text will go, the others are images, so they display right. Suggestions? I'm really confused here... Thanks. Hey there Does anyone know why my code he a.linky:hover .spany{display:block} ...does not work in ie6 but works SWEET in FF? CSS: .linky{z-index:200; display:block; position:relative; cursorointer; } .spany{ display:none; position:absolute; left:0px; top:0px; width:120px; height:120px; background:#ffffff; } a.linky:hover .spany{display:block; } HTML: <a class="linky" href="http://www.domain.co.nz/"> <span class="spany"></span> <img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Thanks heaps guys for even looking! Hello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 I use this in IE: <span style="width:22"></span> as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all. What is the acceptable cross browser method of doing this? Thanks in advance. ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Hello all! I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this: Code: <span style="width:100%; background:red">My name is Danny!</span> IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?! I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table. The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off. Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage? Thanks! the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored? Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Groups</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navbar {
position: relative;
z-index: 10000;
}
#globalNavWrapper {
position: relative;
width: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
z-index: 10;
}
#globalNavWrapper #nav ul {
list-style: none;
z-index: 20;
}
#globalNavWrapper #nav li {
float: left;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
display: inline;
height: 24px;
}
#globalNavWrapper #nav li.navpadleft {
border-left: 1px solid #999;
}
#globalNavWrapper #nav li a {
display: block;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
height: 0;
width: 100%;
padding-top: 24px;
overflow: hidden;
}
#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
#globalNavWrapper #nav .subnav {
position: absolute;
margin: -1px;
border: 1px solid #999;
background: #fff;
width: 150px;
z-index: -10;
display: none;
overflow: hidden;
}
#globalNavWrapper #nav .subnav li {
clear: both;
float: none;
display: block;
background: none;
line-height: 18px;
height: 18px;
width: 150px;
list-style: none;
border: 0;
}
#globalNavWrapper #nav .subnav li.hr {
border-bottom: 1px solid #999;
}
#globalNavWrapper #nav .subnav li a {
background: #fff;
padding: 0 0 0 5px;
width: 1000px;
height: 18px;
color: #000;
text-decoration: none;
}
#globalNavWrapper #nav .subnav li a:hover {
background: #e4f5e5;
color: #009f00;
}
#globalNavWrapper #nav li iframe {
display: none;
z-index: -1000;
height: 220px;
width: 151px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="globalNavWrapper">
<ul id="nav">
<li id="nav_home" class="navpadleft">
<a href="#">Home</a>
</li>
<li id="nav_myXXXX">
<a href="#">My XXXX</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_people">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
<li id="nav_groups" class="active">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_tnn">
<a href="#">News Network</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_green">
<a href="#">Green Living</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_ecards">
<a href="#">E-Cards</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_shopping">
<a href="#">Shopping</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_petit">
<a href="#">Petite</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_don">
<a href="#">Don</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
startList = function() {
var navRoot = document.getElementById("nav");
var is_MSIE = false;
if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
this.className = this.className.replace("over", "");
}
for(j=0; j<node.childNodes.length; j++) {
if(node.childNodes[j].nodeName=="UL"){
if(is_MSIE) {
var iframe = document.createElement('<iframe frameborder="0">');
iframe.style.position = 'absolute';
iframe.border = '0';
iframe.frameborder = 0;
iframe.style.backgroundColor = '#f00';
iframe.src = 'about:blank';
node.appendChild(iframe);
}
}
}
}
}
}
startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
document.getElementById('nav').style.zIndex = 2000;
</script>
</body>
</html>
I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. I'm new to web development and I'm trying to figure out how to make my page a set width, if the view size is less than a certain amount I want the width scroll bar to appear as opposed to the default which rearranges everything? Some examples of what I'm talking about: youtube stackoverflow darkroastedblend (can't post urls) Can anyone point me in the right direction or show me how this is done please? Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers Greetings, I am writing a page that uses CSS to currently place three columns, left, center, and right. I have written the graphics and remainder of the page to fit 1024 x 768. However, when I execute the page, my columns fill the entire resolution (for instance 1280 x 1024) rather than fitting into a 1024 width. What I would like to do is constrain my three columns to a total width of 1024px. The three columns in my CSS look something like this: Code:
#leftcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
width: 220px;
position: absolute;
height: 280px;
left: 1px;
top: 354px;
background-color: #FFFFFF;
}
#centercol {
border: thin none #EF4138;
margin: 4px 240px;
padding: 4px;
}
#rightcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
position: absolute;
height: 280px;
width: 220px;
top: 354px;
right: 1px;
}
Is there a CSS command that can constrain these three columns to be only 1024, or must I use an HTML table? Thanks, Korky I am trying to update an old site with lots of pages, I am trying to create a printing stylesheet (first time as you may guess) I have managed to exclude what I do not want to print but some text is still running off the RHS of the page. I have tried playing with page widths and margins but to no effect, any suggestions? this is what I currently have: TBODY { position: static; width: 700px; margin: 0 auto; } |
|||||||