Glitch In CSS Layout

@CloeyJun 05.2007

Hi guys,

I’ve talked to numerous people and driven myself crazy trying to troubleshoot my new CSS layout. My right side box tops won’t show and won’t align. I don’t know what else to do with this, I’ve tried everything I can think of and no one can seem to help me.

My design is at: ~~[URL=”http://www.heismyvision.net/anotherblessedday/index2.html”]~~http://www.heismyvision.net/anotherblessedday/index2.html[/URL]

Please, if you think you can figure this out, HELP!

to post a comment

CSS

20 Comments(s) _↴

@CentauriJun 05.2007 — #The right side box tops are being applied to <h2> elements in your css, but there are no <h2>s in the boxes in the html ....... if you insert a <h2> heading, the tops should appear. If you do not actually want headings here, you could apply the top via an empty <b> tag or something.

Also, your .right box class is set to 36px high, and this is limiting the box height so the content flows out the bottom - remove that height and the boxes will expand with content.

I also don't think it is a good idea to use the same identifier ("right") for both an id and a class.

Cheers

Graeme

@WebJoelJun 05.2007 — #I've made some progress on this, -can get the top curvy on there. Not quite understanding the 'empty div' though... Might have to take that out.

-It's really close. The problem isn't difficult (just takes time to understand what you have). ?

@FireCracker37Jun 06.2007 — #I'm not sure, but it looks like the top part of your box is assigned to show up with an H2, and I don't see an H2 in your code.

It would be helpful if you would post relevent code so that we don't have to search for it on your page, but it wasn't a big deal here.

@CloeyauthorJun 06.2007 — #First of all, [SIZE="4"]THANK YOU!![/SIZE] The mystery of the missing tops has been solved!

Really, I can't thank you enough, I thought I was going to have to scrap this whole design and go with something else.

My only other problem now, which I'm sure will be very simple to solve, is how can I get my boxes aligned under my header? I'm going to shave my box graphics a bit and see if that helps any.

How do I post my code in forums? I apologize, I should have asked in my first post. I can post it for you if you still need to see it.

Again, thank you SO much!

@CentauriJun 06.2007 — #Alignment can start with the header itself :

[CODE]#header { background: #C38A53 url(images/header2.jpg) top left no-repeat; height: 199px; width: 742px; [COLOR="Red"]margin: 0 auto;[/COLOR]}[/CODE]

will center the header graphic properly. All alignment can be done using margins and floats.

To post code on the forum, select the "Go Advanced" button, and at the top of the entry screen you will see the code tags # <> php. I usually just use the # code tag.

@CloeyauthorJun 06.2007 — #Thanks for the margin tip! I added the code, but the boxes are still off. I've been playing with the margin codes here and there, but most of them just throw everything out of whack if I touch them.

Okay, here's my CSS:

[CODE]
 * { padding: 0; margin: 0; }
 
 body { font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif; font-size: 90%; color: #0b1731; background-color: #466387; margin: 50px 0 0 0; }
 
 a, a:visited { background: transparent; color: #0b1731; }
 a:hover, a:active { background: transparent; color: #0b1731; text-decoration: none; font-weight: bold; }
 
 #container { width: 760px; margin: 10px auto; background: transparent; }
 
 #header { background: #C38A53 url(images/header2.jpg) top left no-repeat; height: 199px; width: 742px; margin: 0 auto; }
 #header h1 { font-size: 1.5em; margin: 20px; padding: 20px 00 20px; color: #466387; background: transparent; }
 
 #left { float: left; width: 476px;
 padding: 0px; }
 
 #section { float: left; width: 550px; }
 
 .section h1 { width: 476px; height: 36px; background: transparent url(images/maintop2.jpg) top left no-repeat; font-size: 20px; margin: 0px;
 padding-top:  1em;
 padding-left:  1em;
 }
 .section { width: 476px; background: transparent url(images/maincenter2.jpg) repeat-y; 
 }
 .section p { padding: 20px 0 0 20px; font-size: 0.95em; margin: 0; }
 .sectionbottom { width: 476px; height: 36px; background: transparent url(images/mainbottom2.jpg) top left no-repeat;}
 .sectionbottom p { padding: 10px 0 0 10px; text-align: right; font-size: 0.85em; }
 
 #right { float: right; width: 250px; padding: 0px;} 
 
 .right h2 { width: 250px; background: transparent url(images/topsidetop2.jpg) top left no-repeat; font-size: 20px; margin: 0px; padding-top: 1em;
 padding-left: 0px;
 }
 .right { width: 250px; background: transparent url(images/topsidecenter2.jpg) repeat-y; }
 .right p { padding: 0 0 0 30px; margin: 0; }
 .rightbottom { width: 250px; height: 36px; background: transparent url(images/topsidebottom2.jpg) top left no-repeat; }
 
 
 
 #footer { clear: both; width: 760px; font-size: 0.75em; text-align: center; padding: 20px 0 0 0; }
 [/CODE]

And here is my HTML:

[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" lang="en" xml:lang="en">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Another Blessed Day</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
 <!-- start container -->
 <div id="container">
 
 <!-- start header -->
 <div id="header">
 </div>
 <!-- end header -->
 
 <!-- start left side content -->
 <div id="left">
 
 <!-- begin section -->
 <div class="section">
 <h1>Welcome</h1>
 <p>Welcome to Another Blessed Day, this site is dedicated to the music ministry of Norm Schmidt and the spreading of the Gospel to the lost and weary.
 </p>
 </div>
 <!-- end section -->
 
 <!-- begin section bottom -->
 <div class="sectionbottom">
 <p></p>
 </div>
 <!-- end section bottom -->
 </div>
 <!-- end left side content -->
 
 <!-- begin right side -->
 <div id="right">
 
 
 <!-- begin right section -->
 <div class="right">
 <h2></h2>
 <p><a href="index.html">Orders</a><br/>
 <a href="index.html">Bio</a><br/>
 <a href="index.html">PAID</a><br/>
 <a href="index.html">Pictures</a><br/>
 <a href="index.html">Comments</a><br/>
 <a href="index.html">Contact</a><br/>
 <a href="index.html">Home</a><br/></p>
 </div>
 <!-- end right section -->
 
 <div class="rightbottom">
 <!-- empty div -->
 </div>
 
 
 <!-- begin right section -->
 <div class="right">
 <h2></h2>
 <p>
 Email<br/>
 Guestbook<br/>
 Comments<br/>
 </p>
 </div>
 <!-- end right section -->
 
 <div class="rightbottom">
 <p></p>
 </div>
 </div>
 <!-- end right side -->
 
 <!-- begin footer -->
 <div id="footer">
 <p>
 Copyright 2007 Another Blessed Day. Designed by <a href="mailto:[email protected]">Cloey</a>.
 </p>
 </div>
 <!-- end footer -->
 
 </div>
 <!-- end container -->
 </body>
 </html>
 [/CODE]

@CentauriJun 06.2007 — #Try these css changes (some things deleted, additions highlighted in red)

[CODE]#container { width: [COLOR="Red"]742px[/COLOR]; margin: 10px auto; background: transparent; }
 
 #header { background: #C38A53 url(images/header2.jpg) top left no-repeat; height: 199px;}
 
 #left { float: left; width: 476px; padding: 0px; [COLOR="Red"]margin-left: 8px; display: inline;[/COLOR]}
 
 .section h1 { height: [COLOR="Red"]20px[/COLOR]; background: transparent url(images/maintop2.jpg) top left no-repeat; font-size: 20px; [COLOR="Red"]padding-top: 16px;[/COLOR] padding-left:  1em; }
 
 #right { float: right; width: 250px; padding: 0px; [COLOR="Red"]margin-right: 8px; display: inline;[/COLOR]}
 
 .right h2 { width: 250px; background: transparent url(images/topsidetop2.jpg) top left no-repeat; font-size: 20px; [COLOR="Red"]height: 36px;[/COLOR]}[/CODE]

Is that the alignment you were after?

@WebJoelJun 07.2007 — #(<-- is stepped back & watching this thread. I was inserting the '[B]top[/B] curvy image' directly into the DIVs where the <h2> was [I]absent[/I] (had to add a "background-image:url()" where one didn't exist before), so as to make a 'curvy-corner box' top [I]with[/I] or [I]without[/I] the header h2 tag. That way, no 'margins' would be required as the 'top image' and the 'bottom image' would suffice as both margin-top/padding-top & margin-bottom/padding-bottom respectively [I]to the DIVs[/I], and let the [I]content text[/I] wax & wane the vertical height accordingly.

-My concern here was that Firefox and IE display <h> tags differently and without special CSS 'assists' (which can be moderately effective), a larger-than-optimal displaying of the <h2> (such as, user-defaults over-riding the page's defaults for h2), then the 'background image' of the <h2> would not be tall enough, and begin to 'tile', making a ragged 'sawtoothed' left & right edge... (hypothetical, -I haven't seen this but suspect it might occur).

The 'curvy corner' top & bottom are [I]presentational[/I] aspects, whereas the <h2> are [I]content[/I] (if they were present, it would be 'readable text'). Myself, -I would segregate the two. I have no problem using a 'background color' for a header tag, or a seamless-tiling pixel shim image... but not a 'curved corner background-image of a specified height & width'. -Too much room for layout to bust under certain user-agent conditions.

But this thread has been educational for me, too. ? As much as a poser from a postee as offered solutions from esteemed peers, I think I learned a thing here. -No matter how a 'kewl page' is done, -there is always someone else whom can do it another way with equally good results.

@CentauriJun 07.2007 — #Agree with WebJoel here, in that empty <h> tags are not the best markup. If every box was guaranteed to have a <h> heading, then fine, otherwise look for other elements to attach images to - the actual div is an obvious choice. The problem here is making sure there is enough top padding before the first content item that adds body graphics to allow the rounded corner to be fully displayed - and that large top area could look a little strange.

Problems using the <h2> involve the graphic itself, and text size, especially when resized by the user. An improvement could be shaving the outer "background" colour from the graphics as much as possible, and adding more overall height to the top images. At the moment, if the line height is made equal to the graphic height, the <h2> text sits too high, overlapping the top edge. Using a top padding (and reducing the <h2> height accordingly) brings the text down, but if the text is user resized, the element runs out of graphic length - a longer graphic with a <h2> height defined in ems would avoid that. Of course, if there is no text actually present, then, as mentioned, there should not be a <h2> tag anyway, so the above is pointless (these techniques can be applied to the left box though).

Possibly a better alternative is to apply the y-repeating body graphic to the div itself, and then applying the top and bottom graphics to the first and last elements via classes, whether they be headings, paragraphs, or lists etc.

As usual with styling web pages, there are different methods each with their own compromises - just need to work out which method best works with the project at hand.

Cheers

Graeme

@khanharoon81Jun 07.2007 — #I want to css code shading color means color density is increases

@CloeyauthorJun 07.2007 — #I just want to thank you all so much for your help and the time you devoting to helping me figure this out. Everything looks GREAT now (http://www.heismyvision.net/anotherblessedday/index2.html). I've been off the web design scene for a year now, so my CSS is a little rusty (especially seeing as how things have greatly advanced). I've learned quite a lot from you guys, I really truly am greatful! ?

I'm just playing around with setting my fonts, link, and rollover styles now. Do you guys have any suggestions for sites I could visit to read up on it?

You guys are too awesome, pat yourselves on the back!

@CloeyauthorJun 07.2007 — #Okay, I need to pick your brains again. I know it's easier to have someone fix a problem for you, but I really want to learn [I]why[/I] certain things aren't working and what needs to be done to correct it.

I have added text to my main box and it's overflowing off the side. I assumed this needed to be fixed in my section.p code, but every change I made did nothing. My CSS has been modified, so here is the new code:

[CODE]* { padding: 0; margin: 0; }
 
 body { font-family: "sans-serif", Tahoma, Verdana, Trebuchet MS; font-size: 90%; color: #0b1731; background-color: #466387; margin: 40px 0 0 0; }
 
 a:link, a:visited { background: transparent; color: #0b1731; text-decoration: none; }
 a:hover, a:active { background: transparent; color: #0b1731; text-decoration: none; font-weight: bold; }
 
 a.nav:link, a.nav:visited { background: transparent; color: #0b1731; text-decoration: none; font-size: 120%; }
 a.nav:hover, a.nav:active { background: transparent; color: #0b1731; text-decoration: none; font-weight: bold; font-size: 120%; }
 
 #container { width: 742px; margin: 10px auto; background: transparent; }
 
 #header { background: #466387 url(images/header.jpg) top left no-repeat; height: 199px; }
 #header h1 { font-size: 1.5em; margin: 30px; padding: 20px 00 20px; color: #466387; background: transparent; }
 
 #left { float: left; width: 476px; padding: 0px; margin-left: 8px; display: inline; }
 
 #section { float: left; width: 550px; }
 
 .section h1 { height: 20px; background: transparent url(images/maintop.jpg) top left no-repeat; font-size: 20px; padding-top:  16px; padding-left:  1em; }
 .section { width: 476px; background: transparent url(images/maincenter.jpg) repeat-y; }
 .section p { padding: 20px 0 0 20px; font-size: 0.95em; margin: 0; }
 .sectionbottom { width: 476px; height: 36px; background: transparent url(images/mainbottom.jpg) top left no-repeat;}
 .sectionbottom p { padding: 10px 0 0 10px; text-align: right; font-size: 0.85em; }
 
 #right { float: right; width: 250px; padding: 0px; margin-right: 8px; display: inline; } 
 
 .right h2 { width: 250px; background: transparent url(images/topsidetop.jpg) top left no-repeat; font-size: 20px; height: 36px; }
 .right { width: 250px; background: transparent url(images/topsidecenter.jpg) repeat-y; }
 .right p { padding: 0 0 0 80px; margin: 0; }
 .rightbottom { width: 250px; height: 36px; background: transparent url(images/topsidebottom.jpg) top left no-repeat; }
 
 
 
 #footer { clear: both; width: 760px; font-size: 0.75em; text-align: center; padding: 20px 0 0 0; }
 
 [/CODE]

And here is the new location of my site: http://www.anotherblessedday.com/index2.htm

@CloeyauthorJun 07.2007 — #p.s. ignore the eye sore that is the music player. I plan to move that around and see where I like it.

@CentauriJun 07.2007 — #[CODE].section p { padding: 20px [COLOR="Red"]20px[/COLOR] 0 20px; font-size: 0.95em; margin: 0; }[/CODE]
It just needed some padding on the right - when defining padding (and margins and other things) using the shorthand method, the order is top, right, bottom, left.

@WebJoelJun 08.2007 — #A more effective 'curvy corner top image' instead of using a header tag use four appropriate background-images with '[I]curved edges[/I]', use a solid color for the [I]position:relative;[/I] container DIV and add "positon:absolute;" images to the 4-corners to simulate a 'curved edge' These images could be re-used (saving http-requests as, once used, are 'cached' anyway), and being independant of the actual <h> text, varying user-sizes of the affected <h> will not affect the corner-images... (yeah I know... get your mind around that convoluted explaination). ?

That way, margin-top your <h> tag and be [I]sans[/I] the top-image of curviness..<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<div style="width:200px; height:auto; position:relative; border:1px solid gray; margin:25px auto; padding:25px; background-color:blue;">

<img src="#" style="position:absolute; left:0; top:0; width:20px; height:20px; background-color:red;">

<img src="#" style="position:absolute; right:0; top:0; width:20px; height:20px; background-color:red;">

<img src="#" style="position:absolute; right:0; bottom:0; width:20px; height:20px; background-color:red;">

<img src="#" style="position:absolute; left:0; bottom:0; width:20px; height:20px; background-color:red;">

<h1 style="margin-top:15px; text-align:center">My Header</h1>

<p style="color:white;">text text text. text. text text text, text text.</p>

<p style="color:white;">text text text. text. text text text, text text.</p>

<p style="color:white;">text text text. text. text text text, text text. text text text. text. text text text, text text.</p>

<p style="color:white;"><br />

THIS BOX WILL AUTOMATICALLY EXPAND AS MORE AND MORE TEXT IS ADDED. REPLACE 'SQUARE IMAGES' WITH APPROPRIATE CURVY-EDGE IMAGES.

</p>

</div>

</body>

</html>[/QUOTE] p.s.: -choose better colors than I did.. :o

@CloeyauthorJun 08.2007 — #[CODE].section p { padding: 20px [COLOR="Red"]20px[/COLOR] 0 20px; font-size: 0.95em; margin: 0; }[/CODE]
It just needed some padding on the right - when defining padding (and margins and other things) using the shorthand method, the order is top, right, bottom, left.[/QUOTE]

See what happens when I add that: http://www.anotherblessedday.com/index2.htm

I tried adjusting all of the padding and it gave me the same messed up results. ?

@CentauriJun 08.2007 — #You just added "20", you forgot the "px" - makes a big difference.

@CloeyauthorJun 08.2007 — #Wow, that's odd! So if my padding is '0' I don't have to add a px, but if it's anything higher I have to specify my size type?

@CentauriJun 08.2007 — #Yes. zero is zero no matter what units, so specifying units doesn't make sense (although it still works if you do). If there is an actual value, the units must be specified as there are a number of different unit types to pick from.

Cheers

Graeme

@WebJoelJun 08.2007 — #Wow, that's odd! So if my padding is '0' I don't have to add a px, but if it's anything higher I have to specify my size type?[/QUOTE]

yeah... zero-pixels = zero-inches = zero-miles (etc.)... and omitting the "px" on any value of " 0 " ("zero") saves a couple of bytes. Do that a hundred times on a single web-page and you decreased the download time a second or two on 56-kbs dial-up.

Also in #CSS _↴

CSS Nav: Image on the Hover?trying to achieve this effect :help with links...

Success!

Help @Cloey spread the word by sharing this article on Twitter...

Tweet This

Glitch In CSS Layout

20 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Glitch In CSS Layout

20 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #CSS _↴