CODEWITHSUNDEEP
htmlcssalignment
user2878249
user2878249

Reputation: 643

Positioning images and text inside a div

I am new to css and trying to create a header for my webpage

The structure of the header is like

-LOGOIMAGE--link1--link2-----TITLEIMAGE(@center)-----link3--link4-

Here is the html of the header

<div id="header">
    <img src="http://goo.gl/Uinfkp" class="logo"/>
    <div id="navbox1">
        <a href="aaa.html">aaa</a>
        <a href="bbb.html">bbb</a>
    </div>
    <img src="http://goo.gl/Uinfkp" class="title"/>
    <div id="navbox2">
        <a href="xxx.html">xxx</a>
        <a href="yyy.html">yyy</a>
    </div>
</div>

And this is what i have tried with css http://jsfiddle.net/WSDJ3/

I have no idea why the images and text are placed like that. Please help!

Upvotes: 0

Views: 69

Answers (3)

Edward Ploy
Edward Ploy

Reputation: 395

For this add just float left to the image. You can choose to give an inline css as I mentioned bellow or you can do internal css or call it with external css with the help of class.

<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo" style="float:left;"/>
<div id="navbox1">
    <a href="aaa.html">aaa</a>
    <a href="bbb.html">bbb</a>
</div>
<img src="http://goo.gl/Uinfkp" class="title" style="float:left;"/>
<div id="navbox2">
    <a href="xxx.html">xxx</a>
    <a href="yyy.html">yyy</a>
</div>

Upvotes: 0

thumbtackthief
thumbtackthief

Reputation: 6211

You are using classes and ids (which is good). Your CSS, however, is using the # selector for both.
# is for id (think of an ID number) and . is for classes. Change it to:

#header
{
    width:100%;
    height:80px;
    background:#232c2b;
}
.logo
{
     float:left;
     width:72px;
     height:70px;
     margin:5px 0;
}
#navbox1
{
 float:left;
 margin:30px 30px;
}
.title
{
     float:left;
     width:175px;
}
#navbox2
{
 float:left;
 margin:30px 30px;
}
a
{
 color:white;
 font-size:15px;
 text-decoration:none;
 margin:auto 10px;
}

Upvotes: 0

aniskhan001
aniskhan001

Reputation: 8521

To select a class you should use . not #
# is used to select an ID

So the CSS should look like this:

.logo
{
     float:left;
     width:72px;
     height:70px;
     margin:5px 0;
}

.title
{
     float:left;
     width:175px;
}

Upvotes: 1

Related Questions