Header Problem

WolfPhantasy · 11-23-2011, 07:49 PM

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> </p>
<p> </p>
<p> </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> </p>
<p> </p>

<p> </p><br />
<iframe width="420" height="182" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
<p> </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 · 11-24-2011, 11:41 AM

Quote:

Originally Posted by WolfPhantasy

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

ronaldroe · 11-24-2011, 06:41 PM

Quote:

Originally Posted by Shadee

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

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.

WolfPhantasy · 11-24-2011, 07:51 PM

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> </p>
<p> </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> </p>
<p> </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> </p><br />
<iframe width="420" height="182" src="https://www.youtube.com/embed/vnlAeF5HEZg" frameborder="0" allowfullscreen></iframe>
<p> </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>

PixelPusher · 11-24-2011, 11:54 PM

Quote:

Originally Posted by WolfPhantasy

Unfortunatly, that didn't helped.

Here's sample.
....

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 Code:

<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;
}

WolfPhantasy · 11-25-2011, 01:55 PM

Thanks guys, that helped me a lot.

ronaldroe · 11-25-2011, 03:22 PM

Got into in on another forum with some dude about why one should not use WYSIWYG editors. This is precisely why.

11-23-2011, 07:49 PM	#1
WolfPhantasy New Member Join Date: Nov 2011 Posts: 3	Header Problem 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> </p> <p> </p> <p> </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> </p> <p> </p> <p> </p><br /> <iframe width="420" height="182" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> <p> </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>

11-24-2011, 07:51 PM	#4
WolfPhantasy New Member Join Date: Nov 2011 Posts: 3	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> </p> <p> </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> </p> <p> </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> </p><br /> <iframe width="420" height="182" src="https://www.youtube.com/embed/vnlAeF5HEZg" frameborder="0" allowfullscreen></iframe> <p> </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 by WolfPhantasy; 11-25-2011 at 01:56 PM.

11-25-2011, 03:22 PM	#7
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 677	Got into in on another forum with some dude about why one should not use WYSIWYG editors. This is precisely why. __________________ Ronald Roe Small Business Web Design

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

11-25-2011, 01:55 PM	#6
WolfPhantasy New Member Join Date: Nov 2011 Posts: 3	Thanks guys, that helped me a lot.