Welcome to WebmasterWorld Guest from 54.145.39.186

Forum Moderators: not2easy

Message Too Old, No Replies

css layout issue

     

mirozake

7:18 pm on Jan 10, 2008 (gmt 0)

5+ Year Member



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:23 pm on Jan 11, 2008 (gmt 0)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month