PDA

View Full Version : My nightmare project: I love it, I hate it. Alignment problems mostly.



rogierius
Aug 15th, 2009, 12:11 PM
I've cheered to quickly. If I fix 1 problem, then the next one arises. If I fix that one, another comes...etc etc etc.

Could someone look at this url and tell me where I go wrong in my CCS?

Apparently aligning DIV's is something only to be mastered with deep and extended knowledge combined with years of experience. And I'm just scratching the surface here. I love it and I hate it...it's a nightmare. But when this website is finished I'll be happy again.

Can somebody look at next issue?
Now my divs are not aligning properly at all when in the sub_navigation the DIV is not 'filled' completely. So fi there is some space left in the DIV#sub_navigation, the DIV#subject, which is suppose to be beneath that, aligns neatly against the [email protected]_navigation. And, naturally, now only IE shows it right, but FF (and Chrome) not.

I'm not skilled enough to see where the problem lies. I think it has to do something with the float attribute, since this is something I added this morning. Before that I used negative margins, but I believe that's weird coding.

So, here it comes. I wonder if someobdy knows what the heck I'm doing wrong.

http://tinyurl.com/p5ccsh

And here as how it should be (In IE7):
http://farm3.static.flickr.com/2653/3822999894_025c7f755b_o.jpg

And here another image of the mock-up I made:
http://farm3.static.flickr.com/2604/3822190389_8a8fd0e78d_o.jpg

Le CSS code:

DIV#shadow_container {
margin: auto;
margin-top: -13px;
width: 1050px;
height: 731px; shadow width top) */
border: none;
}

DIV#shadow_top {
background-image: url(../images/shadow_top.png);
background-repeat: no-repeat;
margin: auto;
margin-top: 0px;
width: 1050px;
height: 26px;
border: none;
}

DIV#shadow_center {
background-image: url(../images/shadow_center.png);
background-repeat: repeat-y;
margin: auto;
margin-top: 0px;
width: 1050px;
height: 659px;
border: none;
}

DIV#shadow_bottom {
background-image: url(../images/shadow_bottom.png);
background-repeat: no-repeat;
margin: auto;
margin-top: 0px;
width: 1050px;
height: 42px;
border: none;
}

DIV#main_container {
background-image: url(../images/gradient_main_container.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: auto;
margin-top: -716px;
width: 990px;
height: 680px;
border: solid;
border-color: #736357;
border-width: 1px;
}

DIV#main_navigation {
margin: auto;
word-spacing: 50px;
padding: 23px 50px;
width: 890px;
height: 18px;
border: none;
}

DIV#artwork_container {
background-color: #FFFFFF;
background-image: url(../images/background_image_main.jpg);
background-repeat: no-repeat;
margin: auto;
width: 960px;
height: 598px;
border: solid;
border-color: #A8A8A8;
border-width: 1px;
vertical-align: middle;

}

DIV#main_opacity { Problem must lay here somewhere
margin: auto;
margin-top: 45px;
margin-left : 45px;
width: 870px;
height: 510px;
border: none;
}

DIV#sub_navigation ul {
list-style: none;
margin: auto;
padding-left: 10.6em;
width: 43.6em;
height: 3em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

DIV#sub_navigation li {
float: left;
margin: 1em;

}

DIV#subject{
margin: 0;
float: left;
padding-right: 15px;
text-align: right;
width: 9.25em;
height: 27.2em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

DIV#content{
float: right;
padding-left: 20px;
padding-right: 30px;
text-align: left;
width: 40.8em;
height: 27.2em;
overflow: auto;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}


HTML code:

<body>
<div id="shadow_container">
<div id="shadow_top"></div>
<div id="shadow_center"></div>
<div id="shadow_bottom"></div>
</div>

<div id="main_container">

<div id="main_navigation">
<a href="home.html" class="press">home</a>
<a href="products.html" class="press">PRODUCTS</a>
<a href="about.html" class="press">ABOUT</a>
<a href="stores.html" class="press">STORES</a>
<a href="news.html" class="press_sub">NEWS</a>
<a href="contact.html" class="press">CONTACT</a></div>

<div id="artwork_container" style="background-image:url(images/background_image_press.jpg)">

<div id="main_opacity">

<div id="sub_navigation">
<ul>
<li><a href="/subpages/blog.html" class="press_small">BLOG</a></li>
<li><a href="/subpages/press.html" class="press_small">PRESS</a></li>
<li><a href="/subpages/photos.html" class="press_small">PHOTOS</a></li>
<li><a href="/subpages/newsletter.html" class="press_small">NEWSLETTER</a></li>
<li><a href="/subpages/links.html" class="press_small">LINKS</a></li>
</ul>

</div>

<div id="subject"><p class="press_subject">News</p></div>

<div id="content">

<p class="content">Fusce magna dolor, porttitor id rutrum eget, pharetra eu nulla. Maecenas adipiscing lectus quis erat semper pretium. Suspendisse a tortor in nisl tempus consequat. Pellentesque porta ornare fermentum. Nam sollicitudin condimentum elit, rutrum malesuada mauris suscipit ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>
</div>
</div>
</div>

<div id="end">
<a href="index.html"><img src="images/home_logo_footer.gif" alt="logo" alt="logo" /></a>
<p class="footer">Life is fun! Play when you can.</p>
</div>


</body>

Kristofa
Aug 15th, 2009, 12:24 PM
Try getting rid of text-align:right on the div #subject.


DIV#subject{
margin: 0;
float: left;
padding-right: 15px;

/* text-align: right; */

width: 9.25em;
height: 27.2em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

I'm presuming you want the text inside the div to be aligned right? I think you may need to apply that the the <p> tag inside the div instead of the actual div.

rogierius
Aug 15th, 2009, 12:34 PM
Try getting rid of text-align:right on the div #subject.


DIV#subject{
margin: 0;
float: left;
padding-right: 15px;

/* text-align: right; */

width: 9.25em;
height: 27.2em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

I'm presuming you want the text inside the div to be aligned right? I think you may need to apply that the the <p> tag inside the div instead of the actual div.

I moved the text-align to the <p> tag, but no success. The div subject still sets itself to the right of div sub_navigation. :(

jhaycutexp
Aug 15th, 2009, 12:45 PM
here you go...



DIV#content{
float: right; change this to left....
padding-left: 20px;
padding-right: 30px;
text-align: left;
width: 40.8em;
height: 27.2em;
overflow: auto;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}




if that does not resolve the problem..

remove first the paddings you got there.. it's pretty huge padding..

remember.. the sum of the widths of the divs inside a containing div.. must not be greater than the actual width of the container.. or else... it will overlap.. like the problem you are having..

rogierius
Aug 15th, 2009, 01:17 PM
here you go...



DIV#content{
float: right; change this to left....
padding-left: 20px;
padding-right: 30px;
text-align: left;
width: 40.8em;
height: 27.2em;
overflow: auto;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}




if that does not resolve the problem..

remove first the paddings you got there.. it's pretty huge padding..

remember.. the sum of the widths of the divs inside a containing div.. must not be greater than the actual width of the container.. or else... it will overlap.. like the problem you are having..


Tried your suggested solution, but if I change the float attribute of the div#content, than all what happens is that content is now aligned against the left side of the container.

http://farm3.static.flickr.com/2521/3823098636_48c688fd98_o.jpg

Also remove or altering the padding does not work. I've changed the width of DIV#content, subject and sub_navigation. But still Firefox aligns the DIV#subject after the last word of the DIV#sub_navigation. How come it does not want to be below that? Should I add a negative margin? Is that the right thing to do?

Edit:Tried negative margin of the div subject. It goes down a bit, but refuses to align itself to the left of the container.

rogierius
Aug 15th, 2009, 01:30 PM
I got it:


DIV#sub_navigation ul { /* All the subnavigation to be found here */
list-style: none;
float: left; <--Added this, and presto!
margin: auto;
padding-left: 10.6em;
width: 43.6em;
height: 3em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

DIV#sub_navigation li {
float: left;
margin: 1em;

}

DIV#subject{ /* Left part of the main_opacity div, with 1 border on the right. This DIV is on the right of the DIV content */
margin: 0;
float: left;
padding-right: 15px;
text-align: right;
width: 9.25em; /* 9.25 em before */
height: 27.2em;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}

DIV#content{ /* main DIV for content, this is the DIV below the DIV sub_navigation */
float: left;
padding-left: 20px;
padding-right: 30px;
text-align: left;
width: 40.8em;
height: 27.2em;
overflow: auto;
border: dashed;
border-color: #A8A8A8;
border-width: 1px;
}