Prosta strona CSS - rozmieszczenie elementów

0

Witam

Piszę prostą stronę w 3 językach. Zetknąłem się z kilkoma problemami. Czy można prosić o pomoc?

  1. ikony języka są rozmieszczone daleko od siebie
  2. Logo jest małe, a chciałbym żeby było pod ikonami na całej szerokości strony a nie tylko fragmencie.

W załączniku szkic graficzny o co mi chodziło. Poniżej kod:

<title>Strona główna</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta name ="description" content="lorem ipsum">
<meta name="keywords" content="słowa kluczowe">
<meta http-equiv="content-language" content="pl">
<meta name="author" content="imię i nazwisko">

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

</head>
<body>
<div id="container">
<div id="naglowek">
<div id="logo">

<img src="obrazy/baner3.jpg"align="right"id="logo">
<a href="http://www.pcworld.pl"</a>

</div>
<div id="links">
<table width="450" style="margin-left:20px">
<tbody>
<tr>
<td><img src="obrazy/f1.jpg" alt="las "width="30" height="20" class="obrazek" style="float:right; margin-right: 10px" /></td>
<td><img src="obrazy/f2.jpg" alt="las "width="30" height="20" class="obrazek" style="float:right; margin-right: 20px" /></td>
<td><img src="obrazy/f3.jpg" alt="las "width="30" height="20" class="obrazek" style="float:right; margin-right: 30px" /></td>
</tr>
</tbody>
</table>
</div>
<div id="search">
<form action="jakaśakcja" method="post">
<input type="text" name="szukaj" value="--wyszukaj--" size="15" maxlength="30">
<input type="submit" value="Szukaj">
</form>
</div>
</div>
<div id="tresc">
<div id="lewakolumna">
<div id="menu_container">
<div id="menu">
<a href="index.html" id="active">1</a>
<a href="autor.html">2</a>
<a href="galeria.html">3 </a>

</div>
</div>
<div id="prawakolumna">
<div id="crunch">

<a href="index.html">Strona główna</a>&nbsp;&gt;&nbsp;

</div>
<div id="content">

<h3>Strona główna</h3>
<p align="justify">

<p>
tresc
</p>

</div>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
<div id="footer">
Stopka
</div>
</div>
</body>
</html> 

STyle:

 body {
background-color:#117EAE;
background-image:url("../obrazy/tlobg.gif");
background-repeat:repeat-x;
color:#555555;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
text-align:center;

}
#container {
margin:0 auto;
text-align:left;
width:930px;
}
#naglowek {
height:65px;
margin-bottom: 8px;
color: #f6f6f6;
}
#naglowek #logo {
float:left;
width:240px;
position:relative;
top:15px;
}
#naglowek #links {
float: left;
width: 490px;
}
#naglowek #search {
float:right;
width:200px;
}
#lewakolumna{
background-color:transparent;
float:left;
width:240px;
}
#menu_container{
background-image:url("../obrazy/tlomenu.gif");
background-repeat:no-repeat;
background-color:#f6f6f6;
}
#menu{
margin-left:15px;
margin-right:10px;
padding-top:50px;
padding-bottom:25px;
}
#menu a {
background:url("../obrazy/strzalka.gif") no-repeat scroll 0 10px transparent;
border-bottom:1px dotted #AAAAAA;
color:#4D4D4D;
display:block;
font-weight:bold;
padding:5px 3px 5px 16px;
text-decoration:none;
}
#menu a:hover{
color:#117EAE;
}

#menu #podmenu a {
background:none repeat scroll 0 0 transparent;
border-bottom:1px dotted #AAAAAA;
color:#415866;
padding-bottom:2px;
padding-left:15px;
padding-top:2px;
font-weight:normal;
}
#prawakolumna {
float:right;
width:690px;
}
#prawakolumna #crunch {
background-color:#f6f6f6;
margin-left: 10px;
margin-bottom:10px;
padding:10px;
}
#prawakolumna #content {
background-color:#f6f6f6;
margin-left: 10px;
margin-bottom:10px;
padding: 5px 20px 10px 10px;
}
#footer{
background-color:#f6f6f6;
margin-top:10px;
text-align:center;
padding:15px;
}
#menu #active{
color:red;
}
#menu #podmenu #active{
color:red;
}
#menu #podmenu a:hover{
color:#117EAE;
}
#tresc{
background: #f6f6f6;
}
#prawakolumna #crunch a{
```html

}

0

Nie widzę co prawda obrazków, więc nie wiem co się kryje pod kwadracikami, które mi się wyświetalają, ale:

  1. ikony języka są rozmieszczone daleko od siebie

Bozia cię pokarała za użycie tabelek.

  1. Logo jest małe, a chciałbym żeby było pod ikonami na całej szerokości strony a nie tylko fragmencie.

Skoro tak, to czemu narzuciłeś szerokość 240px?

#naglowek #logo {
    float: left;
    position: relative;
    top: 15px;
    width: 240px;
}
0

okienka były poglądowe.
Usunięcie wartości px dla loga pomaga, ale coś nie tak jest z plikiem stylów, bo logo przesuwa wszystkie elementy dalej: czyli ikony języka i pasek wyszukiwania.

Wydaje mi się że należy zmodyfikować plik CSS tak, aby logo było oddzielnym nagłówkiem.
Poniżej fragment zmodyfikowanego kodu. Coś jest nie tak, nie wiem czemu logo nadal dodaje się do 1 nagłówka? Proszę o pomoc.

 body {
background-color:#117EAE;
background-image:url("../obrazy/tlobg.gif");
background-repeat:repeat-x;
color:#555555;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
text-align:center;

}
#container {
margin:0 auto;
text-align:left;
width:930px;
}

#naglowek2 {
height:265px;
margin-bottom: 8px;
color: #f6f6f6;
}
#naglowek2 #logo {
float:left;
width: 600px;
position:relative;
top:15px;
}
#naglowek {
height:65px;
margin-bottom: 8px;
color: #f6f6f6;
}
#naglowek #links {
float: left;
width: 490px;
}
#naglowek #search {
float:right;
width:200px;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0