|
CSS - A Float That Breaks Centered Content? (ie7 Issue)
Close this, wrong forum. Sorry!
Similar TutorialsI have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? Essentially I'm creating a 'drop-up' menu without javascript. Here is my test page: http://38.99.165.179/kalle/cssmenu/index3.html PROBLEM: I am using 'float: left' to arrange my main menu items horizontally. With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears. Why is this happening? This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left. Here is my code: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #555555;
color: #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 100%;
height: 80%;
text-align: center;
}
/* MENU BAR */
#menu_container {
width: 100%;
margin: 0 auto;
/* doesn't work!!! */
background-color: #CC6666;
}
#menu {
font-size: 16px;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
}
#menu ul {
}
#menu li {
position: relative;
display: block;
height: 1.2em;
margin-right: 50px;
text-align: left;
/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?
float: left;
/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */
}
#menu li ul {
background-color: #BBBBBB;
position: absolute;
bottom: 1.2em;
display: none;
list-style: none;
width: 110px;
padding: 0px;
}
#menu li:hover ul {
display: block;
white-space: nowrap;
}
#menu li:hover ul li {
display: block;
}
#menu li:hover ul li:hover {
background-color: #777777;
}
/* END - menu bar */
#bottom {
margin-top: 70px;
height: 150px;
text-align: center;
clear: both;
padding-top: 2px;
background-color: #222222;
}
</style>
</head>
<body>
<div id="top">
content
</div>
<div id="menu_container">
<ul id="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Anything</a></li>
<li><a href="#">Needed</a></li>
<li><a href="#">Here?</a></li>
</ul>
</li>
<li><a href="#">Something 1</a>
<ul>
<li><a href="#">Imagine</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Possibilities</a></li>
<li><a href="#">of Magic!</a></li>
</ul>
</li>
<li><a href="#">Something 2</a>
<ul>
<li><a href="#">Taste</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Sensation</a></li>
<li><a href="#">of the Bubbles</a></li>
<li><a href="#">on your Tongue!</a></li>
</ul>
</li>
<li><a href="#">Something 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="bottom">
content
</div>
</body>
</html>
Hello I hope this isnt a stupid questions but here goes. I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600 Thoughts? Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#horizon {
background-color: transparent;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -200px;
text-align: center;
min-width: 900px;
}
#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 900px;
height: 380px;
margin: 0px auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="horizon">
<div id="wrapper">
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>
</div>
</body>
</html>
Hello! I'm pretty new to CSS and to this forum, but I am having a problem with my website. My layout uses a centered content div using auto margins and all the positioning in the layout is done using relative positioning. The centered content div is 800px wide and is supposed to be centered in every page on the site. However, when I switch between certain pages on the site, I'll notice that the content div will shift a bit to the left. I've tried to trouble shoot this many times and can't seem to figure out what the problem is. Does anyone know how I can fix this? I wanted to post the website so you could see an example of the problem, but I'm not allowed to do so. It's not for self-promotion just so I can fix a problem. Anyway hopefully someone can help without seeing the site. Thanks! hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! Hey, I'm a CSS noob, and I'm having some trouble with centering the content of my page. When I have the coding as an internal style sheet the page is centered, but when I put it in an external style sheet it looks the exact same...except for that it's left aligned. All I do is copy and paste it, but it change the layout around? Any tips? Hello. I am trying to solve a float problem. The crux: One wrapper div around a left (floated) column and right column. Content in the left is fine: In the right column I need the image (#logo) to be on the left of a h2 (#name). The #logo is taller than #name. Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name. Please look at my code and diagram of how it should look in my attachment. Thanks Hello i would like to know if there is any hacks or tips to resolve problem in IE6's rendering of Floated Boxes? It seems IE6 add extra padding or margin to some floated element, specially those near the borders of container... How do i get around this? Hi Guys, Ive got a serious'ish error on a site im responsible for and with it being the period between christmas and new years I cant find anyone to help me. So im coming asking for help with an IE6 error which is occuring on http://social.eyeforpharma.com/ It appears fine in every browser apart from IE6. IE7, FF, Safari etc work fine. With no decent debug tools for IE6 available im stuck. Help REALLY appreciated. Kevin. Edit - The error gets worse when you go to view an article. heys all, im having an issue with text that is variable length. i want to float something in the bottom right corner of some text. that something which is floated should have a width of 100px and height of 100px. so for example text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE now the sample text above can be 1 line, or 100 lines. anyone have any ideas? i've been hammering away at this too long Thanks. Hatchetradio.com/radio/ if you check this page it's fine in firefox if you check this page in I.E. the tab on the left hand side actually sits on top of the layout. I'm trying to get it to fit snug. I'm not sure why this is happening. hatchetradio.com/radio/wp-content/themes/reborn/style.css that's the css im using I have a section of 3 divs, 1 floated to the left, one to the right and one in the middle. IE 7 & Firefox are fine however in IE 6 it seems to display the left and right columns as a block pushing the middle column down to the bottom. see screenshot, the image is the middle div while the white side parts are the left and right columns. My code is as follows: CSS Code: Original - CSS Code #headerLeft { float: left; background-image: url('/media/images/040708_05.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #headerRight { float: right; background-image: url('/media/images/040708_07.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #flashMovie { background-color: #FFFFFF; margin-left: 20px; margin-right: 20px; width: 730px; }
hello. i am making a small, rough bar graph on the left side of my page. when i try it, the bar ends up going to a new line. what i'd like to do is have a colored div fill up 80% or 100% of the rest of the space to the right of the key. here is the code: Code:
<div class="bar_graph">
<div class="key">signed: 8,000</div>
<div class="bar signed" style="width: 80%"> </div>
</div>
...
.signatures {
margin-top: 20px;
}
.signatures .bar_graph {
overflow: auto;
margin-top: 2px;
}
.signatures .key {
float: left;
font-size: 8px;
text-align: right;
width: 40px;
}
.signatures .bar {
float: left;
height: 17px;
}
.signatures .signed {
background: #f3b400;
}
.signatures .goal {
width: 100%;
background: #e58728;
}
Having one last problem before the site goes beta live... I have rounded divs, and inside is a floated left menu element. If something in the menu expands the round corners pop out of place rather then shift down. Im not sure what to chage. The site is: adventurevalley.ca/jason/programs/prgSwim.cfm If you mouse over the birthday parties link you will see what I mean (IE7 issue). Thanks a mill! This page works fine in Firefox, but in IE, the float makes the content move off the page to the left. I figured out that without a background-color applied to the .textBox style (which is the DIV that contains the text and image I am floating) it works. However, I really would like the .textBox to have a background color. Anybody knows what to do? Here is the page: http://www.jbbdesign.com/wip/index4.html many thanks, Julia Hey all, I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work. I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help. Pete Heys, I have the following code: <html> <head></head> <body> <div style="width: 100px; height: 100px; border: 1px solid red;"> <div style="width: 200px; border: 1px solid green; float: left;">-</div> </div> </body> </html> In FF and IE7 it works the way I'm desiring; specifically, the child div (width: 200px is contained inside a box, however it breaks outside of it due to the width. ||||||||| ||||||||| |||||||||||| |||||||||||| ||||||||| ||||||||| That's how it should look; but I can't replicate it in IE6. Any ideas? Thanks In this header www.johnschureman.com I have an image, an h1 and a subtitle div. Code: <div id="header">
<img src="../images/jschu-crop150h.jpg">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
<div id="subtitle">
<!-- Here's the tagline -->
<?php bloginfo('description'); ?>
</div>
</div>
I cannot figure out in my css how to make the subtitle appear below the h1. Code: #header {
margin:0;
padding:0;
height:170px;
padding: 0px;
margin-top: 3px;
/* padding-top:110px;
padding-bottom:10px;
padding-right:20px;
padding-left:5px;*/
border-bottom: 1px solid #bab1b1;
background: #404040;
}
#header img {
float:left;
display:inline;
margin: 0 auto;
padding: 10px 10px;
border:none;
}
#header h1{
display: inline;
float:right;
padding:0px;
margin: 0px;
padding-top:100px;
margin-bottom:3px;
margin-right: 5px;
font-size: 2.4em;
letter-spacing:0.1em;
}
#subtitle {
text-align:right;
font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
margin-bottom:3px;
margin-right: 5px;
font-size: 0.9em;
text-transform:uppercase;
color:#bbb;
}
Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance. - Willi Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. |
|||||||