|
CSS - [css] No Tiling After Resizing?
Hey people. I've been desperatly searching for a fix for the bug in my CSS, but I don't know what I'm doing wrong.
Here is a link to the the testfile: http://users.skynet.be/bert_fonteyn...iek/index.html. The page validates as valid XHTML. Now here is the bug in Windows (I have not tested it in Mac yet), both in Netscape 7 as in IE 6. Shrink your window, so you have a horizontal scrollbar. Scroll to the right, and you will notice there is a white area which can 't show the backgroundtile for some 60 px wide. The content (which is white) is there however... Can someone please tell me what I'm doing wrong? Greetz, Bert Similar TutorialsHi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code: Code: #mainContent{
z-index:5;
padding:0;
margin: 2px;
background-image: url(images/common/bodybg.gif);
background-repeat:repeat-y;
height:100%;
}
Then I have my div tag: <div id="mainContent"> which holds 2 other divs, both without backgrounds. Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out. Here is the site: http://www.caillouette.com/SouthernLiving/ thanks Hi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he http://sttwilightfrontier.co.uk/theme.php Theme.php Code: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>
</head>
<div id="container">
<div id="hleftcorner"></div>
<div id="headertop"></div>
<div id="hrightcorner"></div>
<div id="missionName"></div>
<div id="missionDesc"></div>
<div id="headercb"></div>
<div id="contenttlc"></div>
<div id="contenttop"></div>
<div id="contenttrc"></div>
<div id="sidebartop"></div>
<div id="contentleft"></div>
<div id="contentright"></div>
<div id="sidebar"></div>
<div id="content">
<div id="emblem"></div>
</div>
<div id="contentblc"></div>
<div id="contentbottom"></div>
<div id="contentbrc"></div>
<div id="sidebarbottom"> </div>
<div id="contentareabottom"></div>
</div>
</body>
</html>
theme.css Code Code:
@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 100%;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background: url(../images/theme/stars.png) repeat;
}
#hleftcorner {
background: url(../images/theme/h_leftcorner.png);
position:absolute;
left:0px;
top:0px;
width:245px;
height:180px;
z-index:1;
visibility:visible;
}
#headertop {
background: url(../images/theme/header_top.png) repeat-x;
position:absolute;
left:245px;
top:0px;
width:510px;
height:10px;
z-index:2;
visibility:visible;
}
#hrightcorner {
background: url(../images/theme/h_rightcorner.png);
position:absolute;
left:755px;
top:0px;
width:245px;
height:180px;
z-index:3;
visibility:visible;
}
#missionName {
background: url(../images/theme/missionName.png) repeat-x;
position:absolute;
left:245px;
top:10px;
width:510px;
height:58px;
z-index:4;
visibility:visible;
}
#missionDesc {
background: url(../images/theme/missionDesc.png) repeat-x;
position:absolute;
left:245px;
top:68px;
width:510px;
height:73px;
z-index:5;
visibility:visible;
}
#headercb {
background: url(../images/theme/header_cb.png) repeat-x;
position:absolute;
left:245px;
top:141px;
width:510px;
height:39px;
z-index:6;
visibility:visible;
}
#contenttlc {
background: url(../images/theme/content_tlc.png);
position:absolute;
left:0px;
top:180px;
width:45px;
height:45px;
z-index:7;
visibility:visible;
}
#contenttop {
background: url(../images/theme/content_top.png) repeat-x;
position:absolute;
left:45px;
top:180px;
width:702px;
height:45px;
z-index:8;
visibility:visible;
}
#contenttrc {
background: url(../images/theme/content_trc.png);
position:absolute;
left:747px;
top:180px;
width:45px;
height:45px;
z-index:9;
visibility:visible;
}
#sidebartop {
background: url(../images/theme/sidebar_top.png);
position:absolute;
left:792px;
top:180px;
width:208px;
height:45px;
z-index:10;
visibility:visible;
}
#contentleft {
background: url(../images/theme/content_left.png) repeat-y;
position:absolute;
left:0px;
top:225px;
width:45px;
height:521px;
z-index:11;
visibility:visible;
}
#content {
background: url(../images/theme/content.png) repeat;
position:absolute;
left:45px;
top:225px;
width:702px;
height:521px;
z-index:12;
visibility:visible;
}
#contentright {
background: url(../images/theme/content_right.png) repeat-y;
position:absolute;
left:747px;
top:225px;
width:45px;
height:521px;
z-index:13;
visibility:visible;
}
#sidebar {
background: url(../images/theme/sidebar.png) repeat-y;
position:absolute;
left:792px;
top:225px;
width:208px;
height:521px;
z-index:14;
visibility:visible;
}
#emblem {
background: url(../images/theme/SanctuaryEmblem.png);
position:absolute;
width:500px;
height:500px;
visibility:visible;
left: 110px;
top: 10px;
}
#contentblc {
background: url(../images/theme/content_blc.png);
position:absolute;
left:0px;
top:746px;
width:45px;
height:45px;
z-index:19;
visibility:visible;
}
#contentbottom {
background: url(../images/theme/content_bottom.png) repeat-x;
position:absolute;
left:45px;
top:746px;
width:702px;
height:45px;
z-index:20;
visibility:visible;
}
#contentbrc {
background: url(../images/theme/content_brc.png);
position:absolute;
left:747px;
top:746px;
width:45px;
height:45px;
z-index:21;
visibility:visible;
}
#sidebarbottom {
background: url(../images/theme/sidebar_bottom.png);
position:absolute;
left:792px;
top:746px;
width:208px;
height:54px;
z-index:22;
visibility:visible;
}
#contentareabottom {
background: url(../images/theme/ca_bottom.png);
position:absolute;
left:0px;
top:791px;
width:792px;
height:9px;
z-index:23;
visibility:visible;
}
I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes! I want the background image to be stationary as the page scrolls. I'm assuming the fixed parameter would do it but it's not. I have tried the following: Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg) fixed;
and this Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg);
background-attachment: fixed;
}
And neither worked. I thought well maybe scroll means the text will scroll so I changed them to scroll and still, it is tiling. What do I need to do to get it to stay fixed so the contents will scroll? Thanks in advance! Site: project-jericho.com An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div. If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work. The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to. Code:
/* content */
#main {
color: #333;
margin: auto;
padding: 0px;
text-align: left;
width: 680px;
background-image: url('img/bgx2.jpg');
background-repeat: repeat-y;
}
#content{
width: 440px;
float: left;
padding: 10px 10px 20px 10px;
}
* html #content{
padding-top:20px;
}
#content .post
{
margin:0 0 3em 0;
}
#content .cat
{
margin:0;
padding:0;
color:#999;
}
#content .post-info
{
color:#777;
text-align:right;
}
#content .post-info em
{
font-style:normal;
float:left;
margin:0 5px 0 0;
}
em.user
{
padding-left:12px;
background:url(img/user.png) no-repeat left center;
}
em.date
{
padding-left:15px;
background:url(img/date.gif) no-repeat left center;
}
#main .post-comments
{
background:url(img/comments.gif) no-repeat left center;
padding-left:12px;
}
All I need for this code to do is to tile vertically in both Firefox and Internet Explorer. I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance. -Josh Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa I have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way? Here is the relevant code Thanks --James Code: <div class="articlebox"> <div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div> </div> css Code: Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }
I have been asked to create a font resize on a website. I can do the basics of it but I'm running into a couple snags Question 1 In my stylesheet, I have: Code: #centerCol {
float: left;
color: #333;
font-size: 10px;
padding: 10px 10px 10px 15px;
}
And in my code I have a function that contains: Code: document.getElementById('centerCol').style.fontSize = '12px';
It works fine to resize the centerCol ID but what if I want to only resize the <p> tags in the centerCol ID? Question 2 Is there a way to resize without the use of Javascript? Everything I've found so far includes it. Hi there! I am tweaking a WordPress template to fit a blog for a roleplaying game. The template is a three-column, fixed-width one. It looks fine on my tiny 17" monitor at work, but at home on my 22", the blog is very small and sits in the center of the page. (The content section is just 904px wide.) Is there a way to tweak the style.css file in order to give the columns percentage widths instead of absolute pixel widths, so that the center "content" area will resize properly according to the reader's resolution/monitor size/window size? I have some experience with CSS and I'm usually pretty good at tweaking pre-existing CSS to fit my needs, but this is something that's a bit beyond me. I can't put a direct URL in my post, but here's a snippet of the CSS file: Code:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #fff url();
color: #fff;
}
h1, h2, h3, h4, h5, h6{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 16px;
}
a{
text-decoration: underline;
color: #08441e;
}
a:hover{ text-decoration: none; }
a img{ border: 0; }
abbr, acronym{ border: 0; }
address, dl, p{ padding: 10px 0 0; }
blockquote{
margin: 10px 10px 0;
background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
color: #736926;
}
blockquote p{
padding: 10px 10px 10px 20px;
}
blockquote blockquote{
margin: 10px 20px;
background: #fff;
color: #333;
}
blockquote blockquote p{ padding: 10px; }
code{
background: #f9f9f9;
}
dt{
font-weight: bold;
}
dd{
padding: 0 0 5px 15px;
}
hr{
clear: both;
margin: 15px 0 5px;
width: 100%;
border: 0;
height: 1px;
text-align: left;
background: url(images/bg_comment_bottom.gif) no-repeat;
}
small{
font-size: 10px;
}
input, textarea{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
padding: 2px;
}
input#author, input#email, input#url, textarea#comment{
border: 1px solid #cbb945;
background-color: #fffadb;
padding: 3px;
}
input#author, input#email, input#url{
margin: 0 5px 0 0;
}
#container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
text-align: left;
vertical-align: top;
}
#container{
margin: 0 auto;
width: 904px;
padding: 10px 0 0;
}
#header{
margin: 0 0 10px;
float: left;
width: 904px;
height: 250px;
background: url(images/bg_header.gif) no-repeat left bottom;
color: #333;
}
#menu ul{
margin: 0;
padding: 0 0 0 175px;
list-style: none;
}
#menu ul li{
float: left;
margin: 0 5px 0 0;
font-size: 14px;
font-weight: bold;
background: url(images/bg_tab_right.gif) no-repeat right top;
color: #ffffff;
}
#menu ul li a{
display: block;
padding: 14px 20px 10px;
text-decoration: none;
background: url(images/bg_tab_left.gif) no-repeat left top;
color: #ffffff;
}
#menu ul li a:hover{
text-decoration: underline;
}
#pagetitle{
clear: both;
width: 904px;
height: 250px;
}
}
#pagetitle h1 a{
text-decoration: none;
color: #fff;
}
.pagewrapper{
margin: 0 0 10px;
float: left;
width: 904px;
background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
color: #333;
}
.page{
float: left;
padding: 0 5px 5px;
background: url(images/bg_page_top.gif) no-repeat;
}
.wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
float: left;
width: 500px;
}
.narrowcolumnwrapper{
margin: 5px 0 0;
float: left;
width: 500px;
background: #fff url(images/bg_narrowcol.gif) repeat-y;
}
.narrowcolumn{
float: left;
width: 500px;
background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
}
.content{
float: left;
width: 500px;
background: url(images/bg_narrowcol_top.gif) no-repeat left top;
}
Thank you! Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code PHP 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Free UFC PPV</title> <style type="text/css"> body { background-color: #CCC; font-family: Tahoma; } #holder { width: 75%; padding: 10px; border: 1px solid; text-align: left; } #img{ background-image:url(images/header.png); } #login { width: 100%; font-family: Tahoma; font-size:15px; text-align: right; color: Black; border: 1px solid; } </style> </head> <body> <center> <div id="holder" style="width:75%"> <a href="index.php"> <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a> <div id="login" style="100%" > <form action=""> Login:<input name="userlog" type="text" /> Password:<input name="passlog" type="text" /> <input name="btn_sub" type="button" value="Login" /> </form> </div> </div> </center> </body> </html> What can I do to stop resizing? hello people, im stuck. i have a simple layout in html, it works fine in html but when i try to use css to layout the page i cant get the centre cell to resize while the top and bottom don't. here is my html page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td height="52" bgcolor="#009999"> </td> </tr> <tr> <td bgcolor="#FF9933"> </td> </tr> <tr> <td height="52" bgcolor="#009999"> </td> </tr> </table> </body> </html> can anyone help? can css do this? Paul Sully the stuck I have attached the file, If you Open a File using that, the Textarea was styled to go to 90% (<textarea style="width:100%;height:90%;"></textarea>) this is designed only to work in IE! Can someone please help me? Thank you, In advance Zero Here is the code for what is basically the masthead for the top of a web page. It uses tables, and expands and contracts to fit the browser as the viewer re-sizes. Quote: <table width="100%"> <tr> <td><IMG src="images/banner_left_end.gif"></td> <td width="100%" background="images/some_background.gif" align="middle" valign="center"> <!-- middle cell at 100% to push the left and right cells to the browser edges --> </td> <td><IMG src="images/banner_right_end.gif"></td> </tr> </table> What I would like to do is get rid of the table and use DIV tags and CSS to do this, but I'm having trouble figuring out how to push the left image to the left and the right image to the right to make it grow and contract as the browser re-sizes. How is this done? I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped thanks in advance Hi, is there any way to achieve this effect (pseudocode) with CSS? if (image width > 100) add property width="100" to all img tags ie. i want to make all images larger than 100 pixels scale down Alright, this seems to be tricky, but here's the story: I've got a photography gallery I made for a friend, and the last thing that needs to be taken care of is cross-browser compatability. I'm down to one problem of image resizing for thumbnails in IE. I've seen a few solutions, but none of them seem to work, so maybe I'm just doing things wrong, but then again no site has talked about resizing both horiz. and vert. For the site, any image thrown on the page needs to be resized to no greater then 105x100. But please, don't tell me to use PHP for this - I'm very attached to the fact that the entire site weighs in at under 300 lines. Thanks, Brian Ziemek I'm looking to basically replicate the design of Engadget. Not entirely, just the real basic design of it. I'm trying to figure out how to use 4 different images (a right header, left header, left footer, right footer) to construct a site that resizes in different browsers to look good. How do I do this? I'm familiar with CSS and html. I want to make the images in Fireworks and slice them, but after I do that and have the html how do I do things like using a wrapper? Thanks for any help you can offer. http://hmv.co.in/temp/html/boxes.html when the content of the box of either left and right boxes in the above page is diff... the boxes margin is also changed... how can i make both the boxes of the same siz so tht theres blank space in the box tht has less content I fixed it on my own, thanks for the multitude of responses, not. |
|||||||