...

View Full Version : image and text alignment problem



daisychick
06-07-2012, 09:07 PM
Hello all, what I'm trying should be pretty easy and yet... I can't seem to get it right. I'm trying to make the simplest of pages. I want to put an image in the top left corner and still have text that's on the same row as that image be centered. The way I have it now, it keeps pushing it too far to the right. See screenshot and code. Suggestions? My thanks and apologies in advance for such a noob question.

screenshot: http://imagebin.org/215531
html code: http://paste.ubuntu.com/1029129/

imdenisejones
06-07-2012, 09:53 PM
I think I have resolved your problem. I took out the "center" tag and replaced it with a "div" tag and gave it an id of "centerTbl". Below is the code. Hope this helps.


<html>
<head>
<title>Server1</title>
<style media="screen" type="text/css">

html, body {height: 100%;
margin:0;padding:0;}

#wrap {min-height: 100%;
border-top: 40px solid #356CA2;}

#main {overflow:auto;
margin:5;padding:5;
padding-bottom: 100px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
text-align: center;}

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

.align-left { float:left; margin: 0 15px 15px 0; }

/* took out the center tag and replaced it with this id within a div tag */
#centerTbl {
text-align: center;
width: 960px;
margin: 0 auto;
}

</style>
</head>
<body>
<div id="wrap">
<div id="main">
<img src="/images/ubuntu-logo1.gif" class="align-left" />
<div id="centerTbl">
<h1>SERVER1</h1>
<table>
<tr>
<td width="42%">
<h2>Server wiki</h2>
<p>The wiki can be found at <a href="http://server/wiki">http://server/wiki</a>
<p>Please see the Server manager for a user account on the wiki.</p>
</td>
<td width="42%">
<h2>IonTorrent Monitoring page</h2>
<p>Torrent Server monitoring page is in development.</p>
<p>Current page is here <a href="http://server1/cgi-bin/onitor/monitor-dev.pl">http://server1/cgi-bin/monitor/monitor-dev.pl</a></p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">

Authorized personnel only. All activity is logged.
</div>
</body>
</html>

daisychick
06-08-2012, 06:20 PM
thanks so much for the response. I really appreciate it. That aligned the tables nicely. The <H1> (server1) is still a bit too far to the right. I'd like to move that to the left a little bit. Any suggestions? Again, thanks for all the help!

P.S. I fixed the typo / in body:before.

daisychick
06-12-2012, 06:33 PM
following up since it fell to the bottom of the list over the weekend...

daisychick
06-15-2012, 06:58 PM
bueller? bueller?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum