[HTML] Help aligning text

**Shoelace** · 30-09-12

Im very new to coding and i want to code my website so i thought i would start. I have read some guides but i don't understand how i can align my text next to my logo.

I want to do this.

and so far i have this

Code:

<!DOCTYPE html>
<html>
<body>
<a><img src="http://i45.tinypic.com/fjeyb7.png" border="0" alt="Image and video hosting by TinyPic"></a\>
</body>
<body>
<p style="font-family:verdana;color:black;">
Debate</p>
<p style="font-family:verdana;color:black;">
Create</p>
</body>
<body bgcolor="silver">
<style type="text/css">
</body>
</html>

**MentaL**

**George SS** · 30-09-12

You need to do a structure for it first. Let's say the top menu is 900 pixel in width and 120 pixel in height than you go :

PHP Code:


<div id="topbar">
<div id="logo"><a href="#"><img src="logo.png" width="100" height="45" /></a></div>
<div id="menu">
    <ul class="nav">
       <li><a href="#">Debates</a></li>
       <li><a href="#">Battles</a></li>
       <li><a href="#">Create</a></li>
    </ul>
</div>
</div>

than you go with floating elements and positioning them in css

PHP Code:


#topbar {
width:900px;  //width of your topbar
height:120px; //height of your topbar
position:relative; //sets the div relative to its container - recommended to use a wrapper
top:0; //sets the div to stick to the top of the page , whereas top:0 means 0 pixel from the top
margin:0 auto; //aligns the div to the center , once you have a wrapper with biger width than topbar
}
#logo {
float:left; //floats the logo to the left (aligns to the left)
} 
#menu {
float:right //floats the menu to the right (aligns it to the right)
}
ul.nav {
list-style-type:none; //removes bullets or anything from a list item
}
ul.nav li {
float:left; //floats the list items to the left (horizontal menu)
display:inline; //displays the list in line
}

now you just have to set the paddings and the margins to fit your design's position

also using external css is better , and makes your site look more professional if someone views the code

PHP Code:


<link rel="stylesheet" type="text/css" href="yourstyle.css" />

**Shoelace** · 30-09-12

How do i link my css file with my HTML file? I did what you said but it doesn't seem to work for me.

**EliteGM** · 30-09-12

Originally Posted by Shoelace

How do i link my css file with my HTML file? I did what you said but it doesn't seem to work for me.

Exactly how he said, put this in the <head> tags:

Code:

<link rel="stylesheet" type="text/css" href="yourstyle.css" />

Also, no offence, but looking at the HTML you've produced so far, I heavily suggest you read some more tutorials.

**George SS** · 30-09-12

Bellow is a clean way to code a simple page. What you did ... is nothing. Also you don't define the same "body" twice as you did. If you relaly want to set it's bg color just change the <body> to <body style="background-color:#ccc;">

PHP Code:


<!DOCTYPE html> <!-- required for IE browsers -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="topbar">
<div id="logo"><a href="#"><img src="logo.png" width="100" height="45" /></a></div>
<div id="menu">
<ul class="nav">
<li><a href="#">Debate</a></li>
<li><a href="#">Whatever</a></li>
<li><a href="#">Double Whatever</a></li>
</ul>
</div>
</body>
</html>

**tearhear18** · 09-10-12

w3wschool a good teacher
it will answer more than your question..

**foxx** · 09-10-12

w3wschool sucks

Originally Posted by mucski

You need to do a structure for it first. Let's say the top menu is 900 pixel in width and 120 pixel in height than you go :

PHP Code:


<div id="topbar">
<div id="logo"><a href="#"><img src="logo.png" width="100" height="45" /></a></div>
<div id="menu">
    <ul class="nav">
       <li><a href="#">Debates</a></li>
       <li><a href="#">Battles</a></li>
       <li><a href="#">Create</a></li>
    </ul>
</div>
</div>

than you go with floating elements and positioning them in css

PHP Code:


#topbar {
width:900px;  //width of your topbar
height:120px; //height of your topbar
position:relative; //sets the div relative to its container - recommended to use a wrapper
top:0; //sets the div to stick to the top of the page , whereas top:0 means 0 pixel from the top
margin:0 auto; //aligns the div to the center , once you have a wrapper with biger width than topbar
}
#logo {
float:left; //floats the logo to the left (aligns to the left)
} 
#menu {
float:right //floats the menu to the right (aligns it to the right)
}
ul.nav {
list-style-type:none; //removes bullets or anything from a list item
}
ul.nav li {
float:left; //floats the list items to the left (horizontal menu)
display:inline; //displays the list in line
}

now you just have to set the paddings and the margins to fit your design's position

also using external css is better , and makes your site look more professional if someone views the code

PHP Code:


<link rel="stylesheet" type="text/css" href="yourstyle.css" />

That's actually over complicated.

PHP Code:


<div id="header">
    <ul id="menu">
       <li><a href="#">Debates</a></li>
       <li><a href="#">Battles</a></li>
       <li><a href="#">Create</a></li>
    </ul>

    <a id="logo" href="/"></a>
</div>

firstly, you should have something that wraps the whole page and centers it, so you won't have to center each div, the second option would be to make a class that centers and sets the width and add it to each wrapping element, but I prefer one wrap and it works best in most cases

secondly you should use some sort of css reset CSS reset explained ~ onwebdev or normalize.css Normalize.css: Make browsers render all elements more consistently.

PHP Code:


#logo {
    display: block;
    width: 100px;
    height: 50px;
    background: url(logo.png) no-repeat center center;
}

#menu {
    float: right;
}

#menu li {
    display: inline;
    margin-left: 10px;
}

full example here JS Bin - Collaborative JavaScript Debugging

**s-p-n** · 09-10-12

Adding onto what Foxx put, if you want the text in the #menu to be vertically centered you should use inline blocks:
JS Bin - Collaborative JavaScript Debugging

**V for Vendetta** · 09-10-12

<p aling="left"> X </p> try that.

**Shoelace** · 09-10-12

Originally Posted by spruitje

<p aling="left"> X </p> try that.

yeh i did this but i have kinda given up with this project so a mod can close this thread.

**V for Vendetta** · 09-10-12

Originally Posted by Shoelace

yeh i did this but i have kinda given up with this project so a mod can close this thread.

Too bad to hear that really where looking up to this.

**foxx** · 09-10-12

Originally Posted by s-p-n

Adding onto what Foxx put, if you want the text in the #menu to be vertically centered you should use inline blocks:
JS Bin - Collaborative JavaScript Debugging

I would much rather put top margin on the menu element andalign it manually or used line-height than this.. inlineblocks are not supported in IE7 and put an extra white space behind then.. just like inline elements do..

**V for Vendetta** · 09-10-12

Originally Posted by foxx

I would much rather put top margin on the menu element andalign it manually or used line-height than this.. inlineblocks are not supported in IE7 and put an extra white space behind then.. just like inline elements do..

Thanks i might just use this.

[HTML] Help aligning text

Thread Tools

[HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Re: [HTML] Help aligning text

Advertisement