|
CSS - Am I Being Totally Stupid With My Positioning (div's)?
I am trying to get the logo div to sit on top of the background div with the code before....all I can get the logo to do is sit directly BELOW the header....help! please!
PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>golfpeg.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- BODY { background-color: #ffffff; margin: 0px; padding: 0px; } #headerBg { position: relative; top: 0px; left: 0px; background-image: url(/gfx/bg_files/header_bg.gif); width: 760px; height: 102px; z-index: 1; } #logo { position: relative; top: 0px; left: 0px; background-image: url(/gfx/primary_logo.gif); width: 225px; height: 102px; z-index: 2; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td width="760"> <div id="headerBg"></div> <div id="logo"></div> </td> <td> </td> </tr> </table> </body> </html> Similar TutorialsI'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? I am trying to create a basic template layout and am having some difficulties making it look the same in IE (version 7.0) and FF (version 3.5.3). The code is listed below and a live site is located at http://tapmeister.com/layout_test/index.html (watch out, the colors are pretty scary!). For instance, On FF, I have a blue wrapper bar on top, but IE I have a blue id=wrapper bar on bottom. On FF, my content in the yellow sidebars has a top and bottom margin, but no margin in IE. In IE, the green id=main is pushed down allowing the red id=content to show through. What I want is a header, three columns, and a footer. By having FF and IE look so different, I don't even know where to start. Can anyone help me understand why they are different, which one is "right", and how to hack the other one. Thank you, thank you, thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-color: olive;
}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content
{
background-color: red;
}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header
{
background-color: purple;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
ok I have been reading how we shouldnt use px as they dont scale well or whatever.. but I have just tested px in my css and when I resize the size the text scales pretty much the same a with ems or %.. but what doesnt happen is if I resize the browser window itself, the text doesn't scale up or down... with any of the units? is this the standard behaviour? because what I am thinking should happen is that if I reduce the size of browser, the font size should get relatively smaller and vice versa. at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve. what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message). look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed. now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue. my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css. i'll also post my code: Code: <div style="border:#ff0000 solid 1px"><!-- full wrapper --> <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper --> <div><img alt="image" src="img.bmp"></div> <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper --> <div style="text-align:center">caption</div> </div><!-- end caption --> </div><!-- end float --> <div style="background-color:#0000ff"><!-- message area --> <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div> </div><!-- end message --> </div><!-- end full wrapper --> thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on. -z Hi im a relative newbie and am having a really annoying and stupid problem. I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out. any help would be awesome source: kdpatton.com/test.htm Hi, Whats going on with my site in FF? It works fine in MAxthon. http://www.wnv2.com/?wn=tutorials&type=photoshop all the tutorials are messed up ==and== www.wnv2.com There is not bottom!!! Thanks Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.) Hope a smartie here can help me out with this one. Thanks. <edit> IE7 also removes the bullets from my <ul>. Any ideas on that also? </edit> i hate floats. why are they so tempramental! i want to avoid using tables for layout as much as i can within reason... but sometimes it's really difficult! all i want is for the text to be on the left, and the form table on the right. instead they touch on the corners, or on top of eachother, or anything except what i want. here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Effing Floats!!!!!
</title>
<style type="text/css">
.signupform{
width:500px;
border: dashed green 1px;
}
.formtext{
float:left;
width:100px;
border: dotted orange 1px;
}
.formtable{
float:right;
width:400px;
border: double yellow 1px;
}
</style>
</head>
<body>
<div class="signupform">
<p class="formtext">Your email address and personal information are confidential and will not be sold or rented. See our <a href="#">Privacy Policy</a> for more details. By clicking Continue, you agree to the <a href="#">Terms of Service</a>.</p>
<form method=post action="#" name="signup">
<table class="formtable">
<tr>
<td class="label">First Name:</td>
<td class="label">Last Name:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="firstName" name="firstName" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="lastName" name="lastName" value="" size="15"> </td>
</tr><tr>
<td class="label">Email Address:</td>
<td class="label">Re-Type Email Address:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="email" name="email" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="emailConfirm" name="emailConfirm" value="" size="15"> </td>
</tr><tr>
<td class="submit" colspan="4"><input type=submit value="Continue" class="button"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
(ps: if you are going to tell me not to use a table to format my form elements, then i welcome your solution to get it to look the way i need it to without a table) --edit-- ok, sorry, i guess the problem was that i hadn't accounted for the 6 extra pixels in width due to the borders i gave it. HOWEVER, i still have the problem that the floats are not expanding the div which they are in. thus, if i put this at the end of a page in a content area that has a border, the border will end before the content does, much to my chagrin! does anyone know how to fix that? I'm trying to set up a 3 column template using div tags. I have the floats working quite well, but the floats need to be in a larger div tag (id = siteContent) that has a background color surrounding the site so it creates a padding of color. I can't get that to work. As soon as I set the float the columns are taken out. I pulled out the relevant ID styles for each div tag. Code: <div id="siteContent"> <div id="mainContent"> <!--- Header ---> <div id="headerArea"> <div id="orangeNav"></div> </div> <!--- 3 columns ---> <div> <div id="leftSide" style="float: left; width: 160px;">left</div> <div id="centerSideFull" style="float: left;width: 390px;">center</div> <div id="rightSide" style="float: left;width: 160px;">right</div> </div> </div> <div id="bottomNav" style="clear: both;"></div> <div id="footer" style="clear: both;"></div> </div> OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box. Code: <div id="thebox"> <div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div> </div> So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that: Code:
#thebox {
position: absolute;
left: 500px;
top: 300px;
}
.dbtopleft {
background: url(cb_tl.png) no-repeat;
height: 25px;
}
.dbtopright {
background: url(cb_tr.png) no-repeat top right;
height: 25px;
padding: 0 25px 0 25px;
}
.dbtoploop {
background: url(cb_t.png) repeat-x;
height: 25px;
}
So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE? Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary. I have this: all my css files in one subdomain, html.website.com all my iamges in another subdomain, images.website.com i link my stylesheet: <link href="http://html.website.com/html/style.css" rel="stylesheet" type="text/css" /> and in the CSS: background:#333 url("../images/bodybg.png") repeat-x fixed top center; does not work. i have to put the whole domain in there? as far as relative paths, since the image is relative from the path of the location of the stylesheet? so I would think ../images/ should work? I've got limited experience with CSS and I've never done anything with divs, only tables. So my question is really, really, really basic: Not being as adept at CSS as I could be, especially positioning, I'm sort of at a loss as to how to best structure my page using divs. Looking at the comp at http://homework.describe.org/esdcar_home.jpg, would it be best to make everything from the top to the start of the brown bar at the bottom and from the left to the start of the picture one "column" (with nested divs), with everything to the right of the picture's edge a second "main content" column with nested divs inside it? Or should I make one header div that runs from left to right until either above or below the navigation (?), and everything below that point be a 2-column layout (until the brown bar at the bottom)? Does it matter one way or the other? Will it one day be clear to me immediately exactly how best to divide up and structure a page from a comp? Am I just a confused soul, or does everyone kind of struggle with this at the beginning? Sorry to ask such basic questions, but... Thanks in advance. T. Hi, Here is that affected page: www.wnv2.com/v12.php Look at it in IE and then in FF. Why is it not working in IE? The Code is below! Thanks for anyhelp Code: #navigation {
border-bottom:1px solid #b00000;
width:750px;
height:30px;
margin:0;
}
#navigation a
{
color: #FFF;
background: #b00000;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
font: 12px Geneva, Arial, Helvetica, sans-serif;
height:25px;
}
#navigation a
{
display: block;
float: left
}
/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a
{
float: none
}
/* End IE5-Mac hack */
#navigation a:hover
{
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:25px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
display:inline;
}
#navigation li
{
float: left;
margin: 0;
padding: 0;
display:inline;
}
#navigation a:hover, #navigation a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 0 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:30px;
}
Hi guys, I'm new to CSS so pleaz forgive me if the following questions are stupid. 1/ Let's say we have in traditional HTML this: <img src=".."><font class=""><b>French Jokes</b></font> <br> <img src=".."><font class=""><b>French (Freedom) Fries</b></font> <br> <img src=".."><font class=""><b>F*** Jacques Chirac</b></font> <br> <img src=".."><font class=""><b>A bas la France</b></font> Now how should I write that in plain CSS? (I know I cannot use <b>, nor <font> tags). I suppose the <p> tag, correct? Something like: <img src=".."><p id="cat_title">French Jokes</p> <br> <img src=".."><p id="cat_title">French (Freedom) Fries</p> <br> <img src=".."><p id="cat_title">F*** Jacques Chirac</p> <br> <img src=".."><p id="cat_title">A bas la France</p> My problem with CSS is not the table design with float and so on but rather how to lay out a page combining many fonts (some on the same line), some <b> and some <u>'s, some font tags etc. (should I choose <span> rather than <p>?, <div>, rather than <p>, <b> or <strong>, etc, etc ,etc) Thank you for your help. Cheers Andreas Hi all, I need to have two CSS stylesheets that change the background color of my page. All I need to know is the CSS code to change the background color. Cheers. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox... what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY) page is he http://www.gr-p.com/test2.html what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to Hello, I am a complete newb to CSS and I am trying to position on image on my page, what is the correct syntax (the html, and CSS) for me to be able to place an image where ever i want on the screen? Thanks so much for the help |
|||||||