image and header not aligning

by **kaymeis** » Wed Nov 04, 2009 11:33 am

Hi, I tried to get the logo aligning to the left of the header instead it ended up on the right. Here is the link: http://kazmania.110mb.com/indice.htm

by **pagetailors** » Thu Nov 05, 2009 6:12 am

would be helpfull if you post your code below.

i guess there are some errors in your html code.

by **kaymeis** » Thu Nov 05, 2009 8:18 am

Here is both the CSS and the XHTML code. Forget the gaps in the XHTML since it's still a work in progress

CSS

body{background-color:ffffff;
}

.akshion { font-family: Roman;
font-size:24px;
color: #66ccff;
font-style: italic;
float:left;
}
.img{url:ak-shion.gif
width:63
height:40;

}
A:link(color:blue;
}
A:visited(color:blue;
}

.attamain{width:250px;
padding:10px;
border:5px solid grey;
margin:10px;
background-colorffffff;

XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title> Your Title Here </title>
<link rel="stylesheet" type="text/css" href="atk.css">
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
</head>

<body>
<h1 class="akshion">Ak-Shion <h1/>

<img src="ak-shion.gif" width="63" height="40"border="0" alt="Ak-Shion"class="img" />
<div class="attamain">
</div>

</body>
</html>

by **pagetailors** » Thu Nov 05, 2009 8:51 am

Hey.

1. There are several errors in your html/css code.

1.1. The h1 closing tag is wrong: <h1>Text</h1>
1.2. There is no url: attribute in css, and the ; is missing!!! css-content behind the missing ; gets dropped!
1.3. width and height need at least a measuring unit. Common browsers can't handle "width: 63;" use "width: 63px;"

2. If you want the logo to be displayed before the h1, there are differnet ways to do this.
2.1. Set the Logo as an background-image in the h1 tag.
2.2. Put the logo before the h1 tag.
2.3. or use absolute-positioning.

i am not a aware of what your planning, so its kinda difficult to help you.

by **kaymeis** » Thu Nov 05, 2009 12:16 pm

Can you explain 1.2? it's not clear

by **pagetailors** » Thu Nov 05, 2009 12:19 pm

Code: Select all: .img{url:ak-shion.gif width:63 <========== height:40; }

a missing semicolon has significant side-effects.
Correcting this won't solve your problems, but i recognized that your code is a little bit smutty

by **crinkle** » Mon Nov 09, 2009 11:31 pm

Also:

Code: Select all: A:link(color:blue; } A:visited(color:blue; }

Changing the ( to { would be a good start

Welcome!

Smashing Links

Statistics

TOP POSTERS

image and header not aligning

image and header not aligning

Re: image and header not aligning

Re: image and header not aligning

Re: image and header not aligning

Re: image and header not aligning

Re: image and header not aligning

Re: image and header not aligning

Who is online