Skocz do zawartości

[CSS] Trzy kolumny, czyli problemy laika...

Archie

Przez Archie
w HTML i CSS

Rekomendowane odpowiedzi

Archie Newbie

Archie

Opublikowano
Opublikowano

Problem pierwszy - jak ustawić odgórnie szerokośc kolumn "leftcolumn", "content" i "rightcolumn" tak żeby miały ściśle określone szerokości? Wydaje się głupi, ale prosty parametr "width" nie działa w firefoxie (3.0) - prawa kolumna leci na dół, jakby sie nie mieściła, mimo że szerokości są dobrze wyliczone (160 480 160 razem 800). Co za głupota! :P Na razie szerokość kolumn ustalam napisami :).

Problem drugi, niemniej dziwny - stopka. Ma ustawione tło o wysokości 23px, ale przy wyświetlaniu minimalnie go przycina, albo powiela kawałek. I znowu Firefox wyświetla niepoprawnie, a Explorer dobrze (z ustawionym parametrem height: 23px). Firefox wyświetla kilka pikseli wyższy blok. Próbowałem z paddingami, ale wtedy jak w jednej ustawi się dobrze, to w drugiej jest źle... :D

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="opis" />
<meta name="Keywords" content="słowa kluczowe" />
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<center>
 <div id="BODY">
	<div id="LOGO"><!--LOGO--><!--/LOGO--></div>
	<div id="LINKI">
	<!--LINKI-->
		<ul>
		<li><a href="?">Link</a></li>
		<li><a href="?">Link</a></li>
		<li><a href="?">Link</a></li>
		<li><a href="?">Link</a></li>
		<li><a href="?">Link</a></li>
		</ul>
	<!--/LINKI-->
	</div>


	<div id="leftcolumn">aaaaaaaaaa
	</div>

	<div id="content">

		  <a href="#">Download this CSS Layout</a>		 

	</div>

	<div id="rightcolumn">aaaaaaaaaa
	</div>

			<div id="STOPKA"><!--STOPKA-->? 2008<!--/STOPKA--></div>
 </div>
</center>
</body>
</html>

style.css

/*STRONA*/
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
margin: 0;
padding: 0;
}

a img {
border: 0;
}
/*/STRONA*/

/*WNETRZE*/
#BODY {
background-color: #FFFFFF;
text-align: left;
width: 800px;
margin-top: 15px;
}
/*/WNETRZE*/

/*LOGO*/
#LOGO {
height: 138px;
background-image: url(logo.gif);
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
font-weight: bold;
}
/*/LOGO*/

/*LINKI*/
#LINKI {
background-image: url(linki.gif);
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 9px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
text-align: center;
}
#LINKI a:link {
color: #E0E0E0;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
#LINKI a:visited {
color: #E0E0E0;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
#LINKI a:hover {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
#LINKI ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
#LINKI ul li {
display: inline;
list-style-type: none;
margin: 0 10px;
padding: 0;
}
/*/LINKI*/

/*STOPKA*/
#STOPKA {
background-image: url(stopka.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
text-align: center;
clear: both;
}
#STOPKA a:link, #STOPKA a:visited {
color: #000000;
text-decoration: underline;
}
#STOPKA a:hover {
color: #000000;
text-decoration: none;
}
/*/STOPKA*/

#leftcolumn { 
border: 0px;
background: #0033CC;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
float: left;
}
#content { 
float: left;
color: #333;
border: 0px;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 530px;
display: inline;
}

#rightcolumn { 
border: 0px;
background: #0033CC;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
float: right;
display: inline;
}

Odnośnik do komentarza
Udostępnij na innych stronach
mrtn Newbie

mrtn

Opublikowano
Opublikowano
do szerokości jeszcze border się dolicza czasem też zależy od przeglądarki:) dodaj sobie właśnie border pojedyńcze do left right i center i zobacz jak to wygląda, czy faktycznie się nie mieści czy w czymś innym problem.

Pod operą można sobie ogladądać obramowania divów bez konieczności dodawania borderów

W internecie roi się od przykładowych - dobrze działających layoutów:

https://www.google.com/search?hl=en&lr=...yer&spell=1

Odnośnik do komentarza
Udostępnij na innych stronach
GEGE Newbie

GEGE

Opublikowano
Opublikowano

Do IE 6.0 dodaje sie jeszcze 3px

Sztuczna inteligencja (AI, artificial intelligence) to szeroka klasyfikacja przetwarzania danych. Machine Learning to technika przetwarzania danych, która umożliwia wykorzystanie przez komputery istniejących danych w celu przewidywania przyszłych zachowań, rezultatów i trendów. Drugie podejście to uczenie maszynowe (machine learning), czyli technika nauki o danych.

Odnośnik do komentarza
Udostępnij na innych stronach
garyoldman Newbie

garyoldman

Opublikowano
Opublikowano
do szerokości jeszcze border się dolicza czasem też zależy od przeglądarki:) dodaj sobie właśnie border pojedyńcze do left right i center i zobacz jak to wygląda, czy faktycznie się nie mieści czy w czymś innym problem.

Pod operą można sobie ogladądać obramowania divów bez konieczności dodawania borderów

Tak, ale jak da border to w każdej przeglądarce zobaczy co i jak bo te szerokości są różne przez te paddingi i bordery... a pod FF polecam dodatek Web Developer tam również można sobie obramowania włączyć dla dowolnych elementów. Oczywiście możłiwości ma o wiele większe.

W internecie roi się od przykładowych - dobrze działających layoutów:

https://www.google.com/search?hl=en&lr=...yer&spell=1

Fakt jest tego mnóstwo, ale więcej satysfakcji daje zrobienie samemu i to polecam ;) Można się wzorować na jakiś i przy 3 czy 4 stronie idzie gładko już...

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności