|
CSS - Using A Wrapper And Resizing And Such?
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. 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. 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! 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; } 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; } 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 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>
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 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 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 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? 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 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? 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! 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 I have a few lines of text inside a nested div. Everything is fine if I leave it at that but as soon as I add some more, the whole page (wrapper) get shifted left by 9 pixels. It causes a 'jump' hen navigating between this page and the rest of the site. All of these pages are quite simple and were created from the same index page. HTML Code:
<div id="wrap">
<div id="content_awards">
<div id="subcontent_awards">
<div class="award_col">
<h3>Subtitle 1</h3>
Winner<br /><br />
<h3>Subtitle 2</h3>
Winner<br /><br />
<h3>Subtitle 3</h3>
Commended<br /><br />
<!--
<h3>Subtitle 4</h3>
Commended<br /><br />
-->
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
CSS Code:
body
{
padding:2px 0 0 0;
margin:0;
text-align:center;
font-size:14px;
background-color:#FFFFFF;
}
#wrap
{
margin:0 auto;
width:760px;
padding:0;
text-align:center;
}
#content_awards
{
margin:0 auto;
padding:20px 0 0 0;
width:754px;
color:#FFFFFF;
text-align:left;
background-color:#31578E;
clear:both;
}
#subcontent_awards
{
margin:0 auto;
padding:0 10px 10px 10px;
width:734px;
background-image:url('images/bg_awards_shadows.jpg');
background-repeat:no-repeat;
background-color:#31578E;
clear:both;
}
div.award_col
{
float:left;
margin:0 0 0 1px;
padding:0 10px 0 20px;
width:152px;
line-height:130%;
font-size:12px;
}
Thanks, 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? I have nested my content divs within a centered wrapper div. the wrapper div is controlled by an external css file. when content is added to the nested divs they grow outside of the wrapper div. is there a way to force the wrapper to grow with the content like tables do? The CSS: #wrapper { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; position: relative; width: 760px; background-color: #FFFFCC; left: auto; right: auto; height: 400px; z-index: 1; } The HTML: (attached) http://www.djoj.net/newhome.html Hello, I have a div wraper ro contain all of the content. At the bottom I have links to affiliates and their banners. The problem is, for some reason those banners are intruding onto the wrapper div, even though I ended it. I double checked and all of the divs are /'ed And no matter how many <br> or <p></p> I put in it stays the same. Thank you for your help. |
|||||||