homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css layout issue
mirozake

5+ Year Member



 
Msg#: 3545211 posted 7:18 pm on Jan 10, 2008 (gmt 0)

I have these smaller boxes with little pics and a little bit of text to the right of them. It shows up fine in dreamweaver but when viewed in browsers it looks centered. Can you help?

I'm hoping I'm including enough of the code here:

html:

<body id="blue genie interactive">

<div id="container">
<div id="intro">
<div id="pageHeader">
<img src="top1.jpg" width="396" height="193" alt="blue genie interactive" /> </div>

<div class="mastbuttons" align="center">
<ul id="navlist">
<li><a href="index.html">home</a></li>
<li><a href="aboutus.htm">about us</a></li>
<li id="active"><a href="portfolio.htm" id="current">portfolio</a></li>
<li><a href="contact.htm">contact us</a></li>
</ul>
</div>

<br/>
<ul id="navlist">
<li><a href="index.html">web dev</a></li>
<li><a href="aboutus.htm">graphics</a></li>
<li><a href="portfolio.htm">solutions</a></li>
</ul>
<div align="left"><br />
<br />

</div>

<div id="bl1">
<p><em>A.N. Other Design ~ Interior Design</em></p>
<div id="inboxpic"><a href="images/ahbig.jpg" rel="lightbox" title="my caption"><img src="ahsm.jpg" alt="#" border="2" /></a> </div>
<div id="inboxtext">
<p>A.N.Other Design Studio wanted us to create a portfolio for their ...foo text.</p>
<p>click pic to see front page or visit <a href="#" target="_blank">example.com</a></p>
</div>
</div>

<div id="bl1">
<p><em>Company Inc. ~ Air Conditioning and Heating Systems</em></p>
<div id="inboxpic"><a href="images/airbig.jpg" rel="lightbox" title="my caption"><img src="airsm.jpg" alt="spring air" width="80" height="80" /></a></div>
<div id="inboxtext">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>click pic to see front page or visit <a href="#" target="_blank">example.com</a></p>
</div>
</div>

--- and css (the whole thing just in case..)

body{
text-align:center;
margin:0;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.75em;
color:#fff;
}

h1, h2, h3{
font-size:1.4em;
text-align:center;
margin:0;
padding:0;
}

p{
padding:0;
}

#container{
width:396px;
margin: auto;
background-color:#25235e;
}

#bodytext {
padding: 30px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul{
padding:0;
margin:0;

}

ul li{
list-style:none;
padding-left:1em;
border-bottom:1px #365779 solid;
height:1.6em;
}

ul li a:link, ul li a:visited, ul li acronym{
color:#ffa94d;
font-weight:normal;
text-decoration:none;
}

ul li acronym{
border-bottom:1px dotted #ffa94d;
}

ul li a:hover, ul li a:active, ul li a:hover acronym{
color:#fff;
text-decoration:underline;
}

ul li a.c:link, ul li a.c:visited{
color:#bcd0e5;
font-style:italic;
}

ul li a.c:hover, ul li a.c:active{
color:#fff;
}

ul li:hover{
background:url(pics/list_over.gif) top left repeat-x;
}

/*here is navigation related css */

ul#navlist
{
padding-top: 3px;
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 2px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
text-decoration: none;
}

#navlist a:hover
{
color: #fef377;
text-decoration: none;
}

#navlist li a#current
{
color: #fef377;
text-decoration: none;
}

a:link, a:visited{
color:#ffa94d;
font-weight:bold;
text-decoration:underline;
}

a:hover, a:active{
color:#bcd0e5;
text-decoration:none;
}

#pageHeader{
width:396px;
height:193px;
}

#mastbuttons {
margin:auto;
}

#box {
margin-top: 40px;
text-align: left;}
#boxleft {
float:left;
width: 120px;
height: 120px;
padding-left: 30px;
padding-right:10px;
opacity: .5;
filter: alpha(opacity=50);}

#footer{
text-align:center;
position:absolute;
margin-top:43em;
margin-left:-30px;
padding:6px 0;
padding-bottom:1em;
width:396px;
height:40px;
background-color:#25235e;
left: 255px;
top: 22px;
}

#bl1 {
padding: 8px;
vertical-align:top;
}

#inboxpic {
float:left;
padding: 6px;
}

#inboxtext {
text-align:left;
}

[edited by: SuzyUK at 8:53 pm (utc) on Jan. 10, 2008]
[edit reason] examplified personal details [/edit]

 

your_store

10+ Year Member



 
Msg#: 3545211 posted 10:23 pm on Jan 11, 2008 (gmt 0)

The following styles are causing it to be centered:

body
text-align center

#container
margin auto

Remove those two lines to stop your container from being centered.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved