|
CSS - Wrapper Div On Its Own Program
Similar TutorialsHi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this? the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css Any help is appreciated. Thanks in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE. I wish to contain all div tags together, Would appreciate help. For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page. universitysquarecondos. com / owners-2 / updates/ Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something... Note that this only happens in IE, not in Mozilla (of course... ) Any ideas? Thanks for helping a noob get his sealegs, Reid Wondering if anyone could help me root this problem out. I find that when content forces a scrollbar on the browser window, everything in my wrapper div gets nudged to the left about 10 px. I'm using a sticky footer, but other than that, nothing too shifty. Anyone have an ideas? If you Google Black Warrior Review, you can see the site. Here's the pertinent CSS, including Ryan Fait's sticky footer: * { margin: 0; } a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #FF00FF; } a:active { text-decoration: none; color: #FF00FF; } html{ height: 100%; } body { background-attachment: fixed; background-image: url(background4.jpg); background-repeat: repeat-x; background-position: bottom; text-align: left; height: 100%; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } p { padding-bottom: 16px; } .wrapper { min-height: 100%; height: auto !important; height: 100%; /* the bottom margin is the negative value of the footer's height */ margin-top: 0; margin-right: auto; margin-bottom: -35px; margin-left: auto; width: 600px; } .menu { font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding-left: 10px; text-align: left; color: #000000; width: 650px; } .content { width: 590px; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-bottom: 50px; padding-left: 10px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 63px; font-weight: bold; width: 590px; padding-left: 7px; margin-bottom: -7px; padding-right: 3px; padding-top: 20px; } h2 { margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; width: 590px; padding-left: 10px; padding-top: 30px; padding-bottom: 0px; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; padding-top: 16px; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; padding-bottom: 16px; } .contentimg { padding-top: 10px; padding-left: 10px; } .margin { padding-left: 10px; } .revauthor { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #999999; } .revtop { vertical-align: bottom; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; padding-top: 5px; } .footer a { color: #FFFFFF; .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; } .contenttable { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; width: 590px; text-align: left; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-left: 10px; } blockquote { padding-left: 20px; } .push { height: 35px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait */ .footer { font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding-left: 10px; padding-bottom: 0px; height: 25px; vertical-align: bottom; text-align:center; color: #FFFFFF; padding-top: 10px; background-color: #999999; } 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. I'm having trouble getting my content to contain within my wrapper in #$%@% IE. Works as expected in Firefox, of course. I simply want to create a background and then put all of my content on top of that background. CSS; Code: html, body {
margin: 0;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 0;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
#logo {
position: relative;
top: 50px;
border: 0;
padding: 0;
}
HTML; Code: <BODY> <DIV class="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV> <DIV class="wrapper"> <!-- Setup the header area --> <DIV id="logo"><img src="images/header_01.jpg"></DIV> </DIV>--> </DIV> </BODY> </HTML> And with that, presto! IE 8 intelligently puts the logo at the bottom of the page. I'd almost rather build tables nested 20 deep than deal with this! Hello all, I've looked all over the place but cannot seem to find anywhere that explains how to add a footer to a CSS page. Basically i have a wrapper div, which is set to 100%, and within this I'd like a footer which would be alligned to the bottom of the wrapper. I just cannot seem to do it. Would it be a case of creating a new box, and having it aligned to 'bottom'? Hi, I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made. I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be. I could really use some advice on how to sort this. Many thanks in advance. 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>Heading</title>
<style type="text/css">
<!--
body {
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background-color: #C2FFC1;
}
#wrapper {
width:960px;
height:auto;
margin-right: auto;
margin-left: auto;
}
#middle {
position:relative;
top:0px;
width:940px;
height:auto;
float: left;
background-color: #FFFFFF;
}
#leftshade {
top:0px;
width:10px;
height:600px;
float: left;
background-image: url(images/shadeleft.png);
background-repeat: repeat-y;
}
#rightshade {
top:0px;
width:10px;
height:600px;
float: left;
position: relative;
background-image: url(images/shaderight.png);
background-repeat: repeat-y;
}
#banner {
width:940px;
height:150px;
background-color: #FFFFFF;
}
#navbar {
width:940px;
height:50px;
background-color: #6DC072;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-bottom-color: #666666;
text-align: left;
vertical-align: middle;
}
}
#centre {
position:relative;
width:580px;
height:257px;
padding: 10px;
float: left;
}
#content {
width:940px;
height:auto;
background-color: #FFFFFF;
}
#contentleft {
position:relative;
width:150px;
height:auto;
float: left;
padding: 10px;
}
#contentmiddle {
position:relative;
width:580px;
height:auto;
padding: 10px;
float: left;
}
#contentright {
position:relative;
width:150px;
height:auto;
float: right;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftshade"></div>
<div id="middle">
<div id="banner"></div>
<div id="navbar"></div>
<div id="content">
<div id="contentleft">
<p>f</p>
</div>
<div id="contentmiddle">
<p> </p>
</div>
<div id="contentright">
<p> </p>
</div>
</div>
</div>
<div id="rightshade"></div>
</div>
</div>
</body>
</html>
I just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors. body { background-color: #000000; margin: 0px; } #page { width: 960px; font-size: 14px; font-family: verdana, sans-serif; color: #26D578; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 16px; } Hello, I am having a problem with a client's site that I am sure is a CSS wrapper issue. It's happening in IE 7 for me - that is the version I have. It displays fine in Firefox, Opera & Netscape. I would give the link but am not allowed as a new user so I will describe what is happening. When viewing with IE the header starts 1/2 way down the page and the top of the page displays only the body background. If you refresh a few times "most of the time" it will right itself. Here is the CSS code I used: body { background: #240000 url(images/bg3.jpg) repeat-y center top; margin: 0; padding: 0; color: #CC9933; } #Wrapper { background:#240000 url(images/lbg.jpg) no-repeat scroll center top; height:399px; margin:0 auto; width:100%; } Admittedly I do not use CSS in it's pure form. My pages are still table-based layouts and not entirely W3C compliant. I am doing my best to learn how to ditch the tables but in the meantime I still have sites to complete and old habits die hard. I only design as a sideline and for a niche market. So I don't mean to offend any of you who are doing it the right way. This is the first time I have attempted a double background using the wrapper so any help is greatly appreciated. Thank you so much for your time! K Hi, I am currently redoing our website and have some basic layout lying around, but I just cannot find the reason for IEs behavior regarding the background image. I put a static version of the test page up on http://noitekk.de/test/ntk/index.html Everything looks fine in Opera and Firefox, but on IE (6 and 7) the background for the wrapper div is 1px off to the right, so the navigation bar and the header (which is all black ATM) look as if they are positioned badly. Anybody got any idea? Thanks Thomas Hello. I am new to website making and I am trying to create a wrapper that is centered, and 2 <divs> in it. One that will align to the right of the wrapper, one to the left. Heres what I did CSS: Code: #Wrapper {
z-index: 3;
position: absolute;
width:800px;
height:600px;
top:40px;
margin-left: auto;
margin-right: auto;
border: 4px solid red;
background-color: transparent;
}
#Left {
z-index: 2;
position: relative;
width:80px;
height:100px;
top:20px;
left:10px;
border: 1px solid #FFF;
background-color: rgb(255,255,0);
}
#Right {
z-index: 1;
position: relative;
width:100px;
height:80px;
right:10px;
border: 1px solid #FFF;
background-color: rgb(0,255,0);
}
HTML Code: <!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Adzu Kiyako">
<meta name="copyright" content="Copyright Stuff here">
<meta name="robots" content="noindex">
<title>Title of my page</title>
</head>
<body>
<body id="htmlsource">
<body style="background-color:#292929;">
<div id="Wrapper"></div>
<div id="Left">This should be on the left side of the centered wrapper</div>
<div id="Right">This should be on the Right side of the centered wrapper</div>
</div>
</body>
</html>
My problem is 1-The wrapper does NOT align in the center of the page, and 2- The 2 other <div> dont seem to care about my wrapper, the position themself relatively to the viewport, not my wrapper... Any clue of what I can do? Please go easy on me, this is so new to me! Thanks a million times! I'm trying to get multiple DIV tags with an set layout, like [Example 1] to show in this [Example 2] but also scroll along when you click on the arrows now my issue is if I use position "position:absolute" the little colour boxes stay where they are? now if I use "position:relative" I have to put the "top:-500px" and the next box as "top:-1300px" etc. but they are the top line of boxes like aaa and ccc in the first link but I cant see this being the correct way of doing this? I'm completely lost any pointers into how to get this to work would be nice? I've been trying to tweak the styling on hxxp://beecycle-co-uk.domain-ref.http.xenon.lon.periodicnetwork.com/Products.aspx?category=2&product=8 for a while now, and for some reason that page's #wrappper is aligned left, not center. I've picked through each element but I can't see any reason for it to do that. Am I missing something? Hi everyone, This is about to drive me to If you look at this page you will see the problem right away: cant post my url: See forum rules - well I'll be... Why is the name, address ect.. out side of my wrap? When I get rid of the <div id="wrapper"> it doesn't do it, but then I cannot get the whole page to center. my css for the page: Code: @charset "UTF-8";
/* CSS Document */
#header { text-align:center;
}
#footerlinks{ text-align:center;
}
#contact{ text-align:center;
}
#copyright{ text-align:center;
}
#wrapper {
width:960px;
margin:0px auto;
padding:15px;
background-color:#ffffff;
}
My form css: Code: @charset "UTF-8";
/* CSS Document */
form {font-family:"Trebuchet MS", Verdana, sans-serif;width:25em}
h2 {margin:0 0 0 0;padding:0}
p {margin:0 0 1em 0;padding:0;font-size:90%}
fieldset {background:#C361D2;border:none;margin-bottom:1em;width:24em;padding-top:1.5em}
p.legend {background:#794f9e;color:black;padding:.2em .3em;font-size:1.2em;border:2px outset #794f9e;position:relative;margin-bottom:-1em;width:10em;margin-left:1em;margin-top:1em}
#personal {background:#b57fe1;border:outset #b57fe1;}
#tours{background:#b57fe1;border:outset #b57fe1;}
#message {background:#b57fe1;border:outset #b57fe1;}
#personal label {position:absolute;font-size:90%;padding-top:.2em;left:20px}
#personal input {margin-left:9em;line-height:1.4em;margin-bottom:.2em;}
#choices label {position:absolute;padding-top:.2em;left:20px}
select {margin-left:0em;margin-bottom:0}
#size {font-size:90%}
#size input {margin-left:9em}
#size input + input {margin-left:1em}
#size br+ input {margin-left:9em}
#extras {font-size:90%}
#extras input {margin-left:9em}
#extras input +input {margin-left:1em}
#extras br+input {margin-left:9em}
textarea {font:.8em "Trebuchet MS", Verdana, sans-serif;width:29em;padding:.2em}
input[type="submit"], input[type="reset"] {background:#794f9e;font:1.2em "Trebuchet MS", Verdana, sans-serif}
#buttons {text-align:center}
My source code: cant post cuz of urls n stuff - If you wouldn't mind helping me out pm me and I can send you the link and you can see this weirdness. edit--> url is at http://lawofattractionfrequency.com Hey guys, I have been working on this for weeks and it is driving me nuts. I am trying to get the wrapper to expand to accomodate the content, but for some reason it wont expand. Any ideas? Here is the link: h$$p://digitallife.us/tutorials-t.html Thanks, Daniel Ok so either I'm tired and not thinking straight or I'm going crazy... Never had this problem before... The top wrapper has a gap below it in IE6 so it's not flush with the middle wrapper... Any ideas... See my source code below... Thanks for the help. PHP Code: <style type="text/css"> /* Structure */ /*-------------------------------------------------------------------- */ #Container { position:relative; margin:0 auto; width:920px; height:auto; min-height:100%; } #LeftSection { float:left; display:block; width:400px; height:200px; margin:0 0 0 2px; padding: 0 0 0 0; } #RightSection { float:left; display:block; width:400px; margin:0 0 0 0; padding: 0 0 0 0; height:200px; } #GreenTop { float:left; display:block; width:399px; height:30px; margin:0 0 0 0; padding: 0 0 0 0; background-color:#bdcdba; } #GreenTitle { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:100px; margin:0 0 0 0; padding:0 0 0 11px; } #InnerControls { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:295px; height:auto !important; min-height:100%; margin:0 0 0 0; padding:0 0 0 0; } #innerContainer { float:left; display:block; width:295px; height:auto; margin:0 0 0 7px; padding:0 0 0 0; } /* Wraps */ /*-------------------------------------------------------------------- */ #wrapTop { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/topWrapper.gif); background-repeat:no-repeat; } #wrapMiddle { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:auto; background-image:url(images/middleWrapper.gif); background-repeat:repeat-y; } #wrapBottom { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/bottomWrapper.gif); background-repeat:no-repeat; } #wrapInnerTop { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerTopWrapper.gif); background-repeat:no-repeat; } #wrapInnerMiddle { float:left; display:block; width:295px; height:auto; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerMiddleWrapper.gif); background-repeat:repeat-y; } #wrapInnerBottom { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerBottomWrapper.gif); background-repeat:no-repeat; } </style> <div id="Container"> <div id="wrapTop"></div> <!--// Start Auto-Middle Wrapper //--> <div id="wrapMiddle"> <div id="LeftSection"> <div id="GreenTop"> <div id="GreenTitle"><strong>Branch:</strong></div> </div> <div id="InnerControls"> <div id="wrapInnerTop"></div> <div id="wrapInnerMiddle"> <div id="innerContainer">TEST<br /> TEST<br /></div> </div> <div id="wrapInnerBottom"></div> </div> </div> <div id="RightSection"></div> </div> <!--// End Auto-Middle Wrapper //--> <div id="wrapBottom"></div> </div> Originally it worked in IE, but nothing else, now we've gotten it to work in FF, Safari, Opera, et. al., but the page wrapper background disappears in MSIE 7. http://www.splatteredink.com/realms/ CSS: Code: #overall {
background: #ababab url(../images/wrapper_bg.png)100% 0 repeat-y;
width: 100%;
min-height: 335px;
float: right;
}
any ideas? Currently, my site is setup like this: Code:
#wrapper {
margin: 0 auto 15px auto;
width: 900px;
border: solid 1px #999;
border-width: 0 1px 1px 1px;
overflow: hidden;
background: #fff
#left {
float: left;
width: 200px;
margin: 0;
font-size: 75%;
}
#right {
float: left;
width: 698px;
margin: 0;
font-size: 80%;
}
Now I know that I didn't define a background for the #left or #right div, but that is because that is a direct copy and paste of how I currently have it setup since even if I do insert a background color they don't apply. The wrapper's white background seems to overwrite a defined background for the #left and #right. The issue is that the #left is my navigation to which I've colored dark gray (#999). I don't mind if the #right stays white because that is where I place the content of the site. The issue here is when the navigation ends in #left it shows the white beneath the links, which is ugly. I'd like for the dark gray to extend the length of the page filling in the width of the column. I thought I found a "workaround" but not really. I set the wrapper background to #999 which works great when the content on the #right is longer than the navigation inside the #left, but when the #right is shorter the column ends significantly shorter in length and then shows the #999 color beneath where the content ends. I've even tried defining no background in the wrapper (which wouldn't be good anyhow because my body background is a gradient) and even then the #left and #right divs wouldn't take a background color. Help please! Thanks in advance, Michael I have a wrapper div 700px wide that is currently set to the following: Code: div.wrapper {
width: 700px;
height: auto;
background-image: url(../local/images/content.gif);
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
text-align: left;
padding: 0.05in;
position: absolute;
left: 50%;
margin-left: -350px;
border: 2px #000000 ridge;
}
It renders fine in IE, FF, and Opera. Since the height of the content varies, I am trying to accomplish a minimal fixed height of 700px OR larger if the content is longer than 700 px. Any ideas? |
|||||||