Help - Search - Members - Calendar
Full Version: Help with alignment
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
kinetickatie
First off, I apologize for slamming this forum with all my questions. I am still learning the basics and try everything I can think of before asking. So here's my next question!

www.naiveglow.com

The word "advertisment" above the banner/image won't center. Also, the Birthday Package div won't sit to the left. It wants to stay on the right side of the page. How can I fix this? Here is my CSS:

The div in question is #content4

*{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
padding:10px 0 10px 0;
}
body{
width:746px;
margin:auto;
background-color: #ffe3e7;
}
#header{
float:left;
font-family:Tahoma;
font-size:11px;
color:#585858;
height:71px;
margin:0 0 200px 0
}
.feature {
text-align: center;
}
.feature2 {
text-align: center;
}
.lang{
float:left;
width:112px;
margin:10px 0 0 0;
padding:9px 20px 7px 60px;
border-right:1px solid #BABABA
}
.lang img{
padding:3px 0 3px 0;
margin:5px 0 0 0
}
#header .center{
padding:3px 9px 3px 10px;
margin:5px 10px 0 9px;
border-left:1px solid #BDBDBD;
border-right:1px solid #BDBDBD;
}
#belowheader{
margin:50px 50px 50px 50px;
}
.cur{
float:left;
width:120px;
margin:10px 0 0 0;
padding:9px 20px 7px 21px;
border-right:1px solid #BABABA
}
.cur select{
width:101px;
height:17px;
float:left;
border:1px solid #6E6E6E;
margin:7px 0 0 0;
font-family:Tahoma;
font-size:10px;
color:#6E6E6E;
font-weight:bold;
padding:1px 0 0 4px;
}
.cart{
float:center;
width:123px;
margin:10px 0 0 0;
padding:9px 28px 7px 20px;
background-image:url(images/cart.gif);
background-position:20px 4px;
background-repeat:no-repeat
}
.cart strong{
margin:0 0 15px 34px;
float:center
}
.cart font{
color:#C30205;
font-weight:bold;
font-size:11px
}
#menu{
float:left;
margin: 20px 0 0 0;
}
#menu li, #menu li img{
list-style-type:none;
float:left
}
#content{
float:left;
margin:4px 0 0 0;
width:200;
}
#content2 img {
margin: 0px auto;
}
#content2{
background-color:#FFFFFF;;
display:block;
text-align:center;
float:left;
width:350px;
margin: 36px 0px 20px 25px;
font-family:Tahoma;
height:350px;
border: solid 1px black;
}
#content3{
width:145px;
height:350px;
background-color:#FFFFFF;
float:left;
margin: 36px 0 0 10px;
font-family:tahoma;
border: solid 1px black;
padding: 0 4px 0 4px;
}
#content4 img{
margin: 0px auto;
}
#content4{
background-color:#FFFFFF;
display:block;
text-align:left;
float:left;
width:350px;
margin: 150px 0 20px 25px;
font-family:Tahoma;
height:350px;
border: solid 1px black;
}
#left{
float:left;
width:200px;
}
#left h2{
font-family:Tahoma;
font-size:11px;
color:#4F4D4D;
width:218px;
height:20px;
background-color:#EBE0DB;
display:block;
text-align:center;
padding:20px 0 12px 0;
}
#banner{
margin: 0 0 0 230px;
float:center;
text-align:center;
}
.leftnav{
display:block;
float:left;
width:192px;
padding:0px 10px 10px 10px;
margin:0 0 75px 0;
background-color:#F5EBE7;
height:790px;
border: solid 3px #EBE0DB;
}
.leftnav li{
list-style-type:none;
float:left;
width:100px;
background-image:url(images/arrows.gif);
background-position:10px 8px;
background-repeat:no-repeat;
padding:4px 0 0 35px;
}
.leftnav li a{
float:left;
font-family:Tahoma;
font-size:11px;
color:#000000;
text-decoration:none
}
#footer{
text-align:center;
float:center;
margin:500px 0 0 0;
padding:10px 0 0 0;
background-color:#E7E3D8;
height:59px;
width:110%;
}
.pay{
margin:12px 50px 0 13px;
float:center;
text-align:center;
}
.copy{
float:center;
color:#626262;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
}
.copy p{
width:500px;
text-align:center
}
.botmenu{
display:block;
float:left;
width:450px;
padding:10px 0 5px 35px
}
.botmenu li{
float:left;
list-style-type:none;
padding:0 10px 0 10px;
background-image:url(images/dots.gif);
background-position:top right;
background-repeat:no-repeat;
}
.botmenu a{
color:#807F7F;
text-decoration:none;
float:left;
}
#footer .back{
background-image:none;
width:90px;
}
#footer p{
float:left
}
#footer p a{
color:#626262;
text-decoration:none
}
#footer p .under{
text-decoration:underline
}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
Darin McGrew
Examining the elements with Chrome, it looks like the bottom margin of the div#content2 element extends low enough that the word "Advertisement" is centered in the space to the right of the div#content2 element.
kinetickatie
That fixed the advertisement centering! I'm still having trouble with the alignment of the #content4 div though. Any thoughts?
Darin McGrew
Examining the elements in Chrome, it looks like div#content4 isn't clearing div#content2

Adding a top margin to div#content4 doesn't move its rendering box down. It just moves the content lower in the rendering box.
Frederiek
And #content4 is contained in #content3.
kinetickatie
Ok that kind of went over my head...I'm still not sure what to do to fix the alignment.
Frederiek
Get the entire #content4 div (including its content) out of #content3 and put it on the same level as all #content... div's. Then clear the floats from the previous div's using clear: both;.

Read some background on floats in maxdesign's floatutorial at http://css.maxdesign.com.au/floatutorial/ .

Lots of articles/tutorials on CSS can be found at http://www.d.umn.edu/itss/support/Training...design/css.html . There are other webdesign related topics too, even about DW, in the sidebar links.

Side remark: I wonder how you edit your code. I know you use DW, so do you use the WYSIWYG side or the html code side?
kinetickatie
Thanks, fixed it! The footer got out of whack then but I fixed it with relative positioning. Forgot all about that option!

I use a split view. Though I'm not sure why, the WYSIWYG doesn't look anything like the actual site. The alignment is off big time, so I ignore it. When I make a change I use the Preview in Browser function to see how it looks. That gives me an accurate depiction of what the code displays when the site is actually online.
Frederiek
That's the problem with apps such as DW. You'd learn much more if you use a text-editor. You then have complete control over your own code.

Anyway, it looks ok now. The homepage validates, but the CSS doesn't : http://jigsaw.w3.org/css-validator/validat....naiveglow.com/

Fix those too, as a last finishing touch.
kinetickatie
A few years ago in web design class I used BBEdit and SubEthaEdit but I don't remember much about how they work. I'm kicking myself for throwing away my notes and selling my book! I used to be really good at this, believe it or not smile.gif
Frederiek
I use BBEdit myself and there's not much you need to know to work with it (less than with DW glare.gif ).

My experience with books and courses is that they only tell you some basics, but when you need to go beyond that, there are no answers and you're on your own.

Fortunately these days, a lot can be found on the web and I make intensive use of that.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.