|
CSS - Text Popping Out Of Wrapper
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 Similar TutorialsMy ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div. My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region. Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great. Example 1: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Example 2: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> this is my code PHP Code: <?php // XML file $file = "http://www.wired.com/news/feeds/rss2/0,2610,12,00.xml"; // set up some variables for use by the parser $currentTag = ""; $flag = ""; $count = 0; // this is an associative array of channel data with keys ("title", //"link", //"description") $channel = array(); // this is an array of arrays, with each array element representing an //<item> // each outer array element is itself an associative array // with keys ("title", "link", "description") $items = array(); // opening tag handler function elementBegin($parser, $name, $attributes) { global $currentTag, $flag; $currentTag = $name; // set flag if entering <channel> or <item> block if ($name == "ITEM") { $flag = 1; } else if ($name == "CHANNEL") { $flag = 2; } } // closing tag handler function elementEnd($parser, $name) { global $currentTag, $flag, $count; $currentTag = ""; // set flag if exiting <channel> or <item> block if ($name == "ITEM") { $count++; $flag = 0; } else if ($name == "CHANNEL") { $flag = 0; } } // character data handler function characterData($parser, $data) { global $currentTag, $flag, $items, $count, $channel; $data = trim(htmlspecialchars($data)); if ($currentTag == "TITLE" || $currentTag == "LINK" || $currentTag == "DESCRIPTION") { // add data to $channels[] or $items[] array if ($flag == 1) { $items[$count][strtolower($currentTag)] .= $data; } else if ($flag == 2) { $channel[strtolower($currentTag)] .= $data; } } } // create parser $xp = xml_parser_create(); // set element handler xml_set_element_handler($xp, "elementBegin", "elementEnd"); xml_set_character_data_handler($xp, "characterData"); xml_parser_set_option($xp, XML_OPTION_CASE_FOLDING, TRUE); xml_parser_set_option($xp, XML_OPTION_SKIP_WHITE, TRUE); // read XML file if (!($fp = fopen($file, "r"))) { die("Could not read $file"); } // parse data while ($xml = fread($fp, 4096)) { if (!xml_parse($xp, $xml, feof($fp))) { die("XML parser error: " . xml_error_string(xml_get_error_code($xp))); } } // destroy parser xml_parser_free($xp); // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> this is the part that generates what parts of the RSS you see, and the links... PHP Code: // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> How can I get the links displayed to pop in a new window, much like this... PHP Code: <a href="http://www.google.com/" target="_new"> This will pop in a new window(RAPP) ... basically, make the headers(which are links), to do _new window For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out. Here is the site university square condos (dot) com Any idea where I could be going wrong? 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. Hi, 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 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'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'? 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 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; } 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. 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! 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 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 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? 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 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) |
|||||||