Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    image and text alignment problem

    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/

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Chicago, Il
    Posts
    7
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Post image and text alignment problem (solution)

    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.

    Code:
    <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>

  • Users who have thanked imdenisejones for this post:

    daisychick (06-08-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by daisychick; 06-08-2012 at 06:48 PM.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    following up since it fell to the bottom of the list over the weekend...

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    bueller? bueller?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •