www.webdeveloper.com
Results 1 to 8 of 8

Thread: Alignment question

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    4

    Alignment question

    Hey all,

    I am new to HTML/CSS and to this forum.
    I want to make a simpel site to start with. But in the header of the page i want 2 pictures and some text and all should be in one line.

    Now the part ii can't figure out:
    The first picture needs aligne left then i want some text with align center and the last picture needs allign right.

    Also a side question, the site is on my pc and im running it in Firefox to test but the top of the header has anathor .5 cm of white above it. Margin is 0px and padding is 0px. any suggestions on this one?

    Thank you all for reading

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    You should float your images and then center the text. Also, you want to apply a zero margin and padding to the body and html elements to remove the gap you're talking about. Here's a working example:
    http://jsfiddle.net/DbVq2/

  3. #3
    Join Date
    Oct 2012
    Posts
    4
    thanks a lot i will try this

  4. #4
    Join Date
    Sep 2012
    Posts
    5
    Quote Originally Posted by ferdi9999 View Post
    Hey all,

    I am new to HTML/CSS and to this forum.
    I want to make a simpel site to start with. But in the header of the page i want 2 pictures and some text and all should be in one line.

    Now the part ii can't figure out:
    The first picture needs aligne left then i want some text with align center and the last picture needs allign right.

    Also a side question, the site is on my pc and im running it in Firefox to test but the top of the header has anathor .5 cm of white above it. Margin is 0px and padding is 0px. any suggestions on this one?

    Thank you all for reading
    It would be awesome if you could show the code.

  5. #5
    Join Date
    Oct 2012
    Posts
    4
    I have below in the body

    Code:
    <header>
    	<div class="header"><img src="Pics/imageleft.jpg" alt="imageleft" class="alignleft" width="133px" height="100px"><H1>Titel<span class="nemo">Text</span></H1><img src="Pics/imgright.jpg" alt="imgright" class="alignright" width="133px" height="100px"></div>
    </header>
    and i use this css

    Code:
    .alignleft {
    	float:left;
    }
    
    .alignright {
    	float:right;
    }
    
    H1 {
    	text-align:center;
    }
    The problem I'm still having is that the right picture go's to the second line.

    Also i still have a white bar above my header (background header is yellow)
    The CSS for the header:
    Code:
    header {
    	padding-top:0px;
    	margin-top: 0px;
    	height: 100px;
    	background-color: #CCFF33;
    	color: #FF0000;
    }
    Hope you people can help me.

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Simply move the right image above the H1:

    Code:
    <header>
        <div class="header">
            <img src="Pics/imageleft.jpg" alt="imageleft" class="alignleft" width="133px" height="100px">
             <img src="Pics/imgright.jpg" alt="imgright" class="alignright" width="133px" height="100px">
            <H1>Titel<span class="nemo">Text</span></H1>
           
        </div>
    </header>​

  7. #7
    Join Date
    Oct 2012
    Posts
    4
    J bent geweldig Ook nog enig idee hoe ik mijn witte balk boven mijn header kwijt raak?

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    As noted previously, I'm guessing your white bar is coming from the default padding on the body and html tags. Try adding this:

    Code:
    html, body {margin: 0; padding: 0;}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles