|
CSS - Problem With Multiple Images In Header-> Left, Center, Right...floating;
Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... Similar TutorialsTrying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. http://zeroonedesign.com/beyond%2Dmap/www/ Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far: CSS: Code: * {
margin: 0;
padding: 0;
}
#container {
float: left;
width: 960px;
border: 1px solid #000000;
}
.left {
float: left;
width: 650px;
}
.right {
float: left;
width: 250px;
}
HTML: Code: <div id="container"> <div class="left"> left content goes here </div> <div class="right"> right content goes here </div> </div> Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated Nevermind... I figured out a way to do it. And I fixed a major typo. hi, this might be a simple question: i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want). this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6? thanks, tim Hi, Code: <div class="paginator"> <span style="float:left"><span class="prev_next"><a href="">PREV</a></span> <span class="page_links"><a href="">2</a><a href="">3</a><a href="">4</a></span> <span style="float:right"><span class="prev_next"><a href="">NEXT</a></span></span> </div> How do I create this layout? ------------------------------------ |PREV...............123..............NEXT| ------------------------------------ 123 must be in the middle. I have been trying to position it correctly but it always comes up messed up. Thank you. i want to position a div 383 pixels left of the center of my browser. i've tried using left:50% and a negative margin..anyone have suggestions on things to try? Every time I switch Web pages, the display starts at the far left and jumps to center. Is there a way to correct this and still allow for variations in screen sizes and resolution. http://www.madjazz.org/index.html http://www.madjazz.org/CSS/RobustLayout.css Thank you Hi, Please help! I have multiple ul lists and I'm trying to float each list left and center on the screen all of them using css. I'm not trying to have an inline list. I'm trying to keep the three list, float left but center on the page. floating works but I'm having problems centering on the page. I have used margin-left and right:auto but because I'm using float left if stays on the left. Does anyone have any solutions. thank-you in advance Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated! My html code: 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=us-ascii" />
<title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
<!-- begin main content -->
<div id="center" class="column">
<br />
<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
<h5>Still Life with Colour '08</h5>
</div>
<!-- end main content -->
<!--begin left nav list -->
<div id="left" class="column">
<br />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About the Artist</a></li>
<li><a href="resume.html">Artist's Resume</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<!--end left nav list -->
<!--close content div -->
</div>
<!--begin footer information -->
<div id="footer">
<center><p class="foot">Copyright 2008</p></center>
</div>
<!-- end footer information -->
</body>
</html>
My CSS Code: Code: body{
background-color: White;
font-size: 16px;
margin: 0;
padding: 0;
}
#header{
background-color:#333;
height:150px;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 100px; /* RC width */
}
#left{
float:left;
width:200px;
background-color:#afeeee;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#center {
background-color:#ffffff;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color:#48d1cc;
height:100px;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
ul.nav {
list-style: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: large;
}
ul.resume {
list-style: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: 1.3em;
}
#left a {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
display: inline;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 2.75em;
margin: 0;
margin-right: 2px;
text-align: center;
text-decoration: none;
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
I am a beginner with CSS, so if this question is stupid, please don't pay it too much mind. I am attempting to put a heading in the center of my page around a navigation bar that I have floating to the left, but it is not working. When I clear the float, it is stuck in one spot below the float. I cannot position the heading where I want. And if I try to use a div align, I get it off center and pretty much unmovable. If I use positioning on the header, I can only move it up and down, not into the center. So how can I counter that pesky floating nav bar? Hi all, http://www.jaysonsgroup.com/zpip2/z.html - please see the bottom four links (home, glossary, contact, credits) The HTML is as follows: Code:
<div class="centerlinks">
<table align='center'>
<tr>
<td>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Glossary</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Credits</a></li>
</ul>
</td>
</tr>
</table>
</div>
The CSS: Code:
.centerlinks {
float: left;
width: 550px;
text-align: center;
}
.centerlinks ul {
list-style-type: none;
}
.centerlinks li {
float: left;
padding-left: 10px;
padding-right: 10px;
}
As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future. On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this? (I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list) Thanks in advance!! I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help. Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
My site is here... css here... I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.) I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif... Thanks Bryan Gah. Internet Explorer is doing mighty funky things with my webpage. http://www.maths.tcd.ie/~icecube The floating images in the main posts work fine from firefox, but in the IE that I checked them out on, there are just blank spaces where the images/comments/bored should be - but even then you can still right click on the space where the image should be to save it and stuff. Anyone have any help/suggestions? In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
|
|||||||