Prosta strona CSS - rozmieszczenie elementów

2011-10-04 21:53
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

}

edytowany 1x, ostatnio: madmike, 2011-10-08 02:57

Pozostało 580 znaków

2011-10-05 10:48
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;
}

Pozostało 580 znaków

2011-10-08 12:00
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;
}

Pozostało 580 znaków

Liczba odpowiedzi na stronę

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