Header Problem

W

WolfPhantasy

New Member
I have problem with my code, when i put logo into the header and spread him in web desingner software witch i use seems ok. When i open with chrome or different browser. Logo is overrunned trough text and links.
Anyone can help me?
Thanks.


<link href="style.css" rel="stylesheet" type="text/css" />
<title> template</title>
<style type="text/css">
body,td,th {
font-size: 12px;
}
a {
font-size: 20px;
}
body {
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="container">
<div id="logo">

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="header">

<ul><li></li>
<li>
<h2><a href="index.html">Početak</a></h2>
</li>
<li>
<h2><a href="o nama.html"> O Nama</a></h2>
</li>
<li>
<h2><a href="usluge.html">Usluge</a></h2>
</li>
<li>
<h2><a href="novosti.html">Novosti</a></h2>
</li>
<li></li>
<li><a href="kontakt.html">Kontakt</a> <a href="reference.html">Reference </a></li>
</ul>
<img src="logo 1.png" width="774" height="138" /> </div>

<div id="content">
<h1>Dog Names and Breeds</h1>
<div id="left">
<div class="text">
<h2>O Dobermanu</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p><br />
<iframe width="420" height="182" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
<p>&nbsp;</p>
</div>
<div class="photos">
<img src="images/dog1.jpg" alt="bog 1" border="0" />
<img src="images/dog2.jpg" alt="bog 2" border="0" />
<img src="images/dog3.jpg" alt="bog 3" border="0" />
<img src="images/dog4.jpg" alt="bog 4" border="0" />
<img src="images/dog5.jpg" alt="bog 5" border="0" />
</div>
<div class="clear"></div>
</div>
<div id="right">
<h2>Novosti </h2>


</div>
<div class="clear"></div>
</div>


</div>
</body>
</html>
 
Shadee

Shadee

New Member
WolfPhantasy said:
<body>
<div id="container">
<div id="logo">

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>
Click to expand...

Is this your logo? Because it looks like you have 3 paragraphs with &nbsp; in them. I assume your logo is an image of some sort?
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Shadee said:
Is this your logo? Because it looks like you have 3 paragraphs with &nbsp; in them. I assume your logo is an image of some sort?
Click to expand...
Oddly, no, the logo is further down:

<img src="logo 1.png" width="774" height="138" />

This code is really confusing. Spend some time organizing it, outside the WYSIWYG. For a header with nav, in XHTML, all you will need is something like this:

<div class="header">
<img class="logo" src="logo.png" />
<ul class="header-nav">
<li><a href="index.html">Početak</a></li>
<li><a href="o nama.html"> O Nama</a></li>
<li><a href="usluge.html">Usluge</a></li>
<li><a href="novosti.html">Novosti</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

Then, you float the img to the left, ul to the right, and float the li tags.

On a side note, try not to use spaces in file names. Bad news.
 
W

WolfPhantasy

New Member
Unfortunatly, that didn't helped.

Here's sample.





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title> template</title>
<style type="text/css">
body,td,th {
font-size: 12px;
}
a {
font-size: 20px;
}
body {
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="container">
<div id="logo">

<p><img src="logo 1.png" width="774" height="138" /></p>
</div>
<div id="content">
<h1>Dog Names and Breeds</h1>
<div id="left">
<div class="text">
<h2>O Dobermanu</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Dobermana je prvi odgojio Luis Doberman u Nemačkoj oko 1890. godine. Kao porezniku, trebao mu je pas za za&scaron;titu, pa je odlučio da odgaji novu rasu, koja bi po njegovom mi&scaron;ljenju bila idealna kombinacija snage, odanosti, inteligencije, i neustra&scaron;ivosti. Razvoj i usavr&scaron;avanje rase su nastavili Oto Goler (Otto Goeller) i Filip Gruning (Philip Gruening).</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Veruje se da je doberman nastao ukr&scaron;tanjem vi&scaron;e rasa koje su imale osobine koje su tražene u dobermanu, uključujući pinčera, rotvajlera, turin&scaron;kog ovčara (Thuringian Shepherd Dog), crnog hrta, nemačku dogu, vajmarovog trkača (Weimaraner), nemačkog kratkodlakog ptičara i nemačkog ovčara. Tačan odnos me&scaron;avine krvi, pa čak i rase, ostali su nepoznati do dana&scaron;njeg dana, mada mnogi stručnjaci veruju da je doberman kombinacija najmanje četiri od pomenutih rasa. Jedini izuzetak je dokumentovano ukr&scaron;tanje sa hrtom. Takođe je rasprostranjeno mi&scaron;ljenje da je nemački ovčar dao najvi&scaron;e gena u uzgoju ove rase.</p>
<p>&nbsp;</p><br />
<iframe width="420" height="182" src="https://www.youtube.com/embed/vnlAeF5HEZg" frameborder="0" allowfullscreen></iframe>
<p>&nbsp;</p>
</div>
<div class="photos">
<img src="http://www.webdesignforum.com/images/dog1.jpg" alt="bog 1" border="0" />
<img src="http://www.webdesignforum.com/images/dog2.jpg" alt="bog 2" border="0" />
<img src="http://www.webdesignforum.com/images/dog3.jpg" alt="bog 3" border="0" />
<img src="http://www.webdesignforum.com/images/dog4.jpg" alt="bog 4" border="0" />
<img src="http://www.webdesignforum.com/images/dog5.jpg" alt="bog 5" border="0" />
</div>
<div class="clear"></div>
</div>
<div id="right">
<h2>Novosti </h2>

</div>
<div class="clear"></div>


</div>
</body>
</html>
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
WolfPhantasy said:
Unfortunatly, that didn't helped.

Here's sample.
....
Click to expand...

Because you did not follow Ron's advice. Look at the code he supplied you. Ideally you want a header element. Dont wrap images in paragraph tags, there is no need for this. If you need an image to be a block-level element use the css "display"property, and set it to "block".
HTML: 
<div id="header">
   <!-- Place logo and main menu in this parent element -->
</div>

Also don't use empty paragraph tags for spacing. This is terrible practice, and makes your code bloated. Use css property "padding" instead.
Code: 
<!-- Bad Practice -->
<p>&nbsp;</p>

<!-- Use CSS instead -->
p {
   padding:10px 5px;
}
 
Last edited:
ronaldroe

ronaldroe

Super Moderator
Staff member
Got into in on another forum with some dude about why one should not use WYSIWYG editors. This is precisely why.
 
You must log in or register to reply here.
Top