Forum.Legalne.info: [css] przykład strony 3-kolumnowej przy zastosowaniu DIVów - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
  • 2 Stron +
  • 1
  • 2
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[css] przykład strony 3-kolumnowej przy zastosowaniu DIVów na prośbę Saddama

#21 Użytkownik jest niedostępny   neo92 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 452
  • Dołączył: 31-March 07

Napisany 14 May 2007 - 05:34 PM

Niektórzy nie mają czasu na zbyciu :/
Dodaj obrazek
Dodaj obrazek
0

#22 Użytkownik jest niedostępny   Krzysi3k 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 7
  • Dołączył: 19-May 07

Napisany 19 May 2007 - 03:45 PM

Dzięki za tuta, z niego się nauczyłem ustawiać divy :D czytałem go chyba 3 dni temu, ale teraz dopiero się zarejestrowałem :rolleyes:
0

#23 Użytkownik jest niedostępny   neo92 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 452
  • Dołączył: 31-March 07

Napisany 21 May 2007 - 08:47 PM

Zobacz postFireBoy, o Jan 31 2007, 02:44 PM, powiedział:

Nie wiem czy zauważyliście, ale takie rozwiązanie wygląda dobrze tylko w przeglądarkach, które poprawnie interpretują CSS czyli nie w Internet Explorerze...
Jak odpalam powyższy kod w FireFoxie jest OK, ale jak przełączę na IE to niestety div - prawy ląduje poniżej srodka i lewego... Czy ktoś ma podobnie??
Na razie jeszcze nie mam czasu, ale postaram się zrobić to jak trzeba...
W takich przypadkach stosuje się tzw hacki na IE po to żeby strona wyglądała dobrze na każdej przeglądarce... Będę miał chwilę to wkleję właściwy kod.

Przy okazji witam wszystkich bo to 1. mój post na tym forum. Bardzo mi się ono podoba. Wyróżnia się spośród wielu innych fachowością wypowiedzi a o to mi chodzi jak szukam rozwiązania jakiegoś tematu...
Pozdrawiam wszystkich !!
FireBoy

[...dodano po chwili...]
Proponuję takie rozwiązanie:
#container {
		margin:0 auto;
		padding:0 5px 0 5px;
		position:relative;
		width: 700px !important;
		width: 710px; /* IE */
		background-color:#fff;
		text-align:left;
		clear: both;
}

aga_kc w Twoim rozwiązaniu IE widzi div'a container jakby miał szerokość 690px, a to z uwagi na to, że dodałaś padding: 0 5px 0 5px; (tak nawiasem mówiąc można to zrobić padding: 0 5px; - powinien być ten sam efekt). Trzeba więc zastosować hack'a który ustali dla IE o 10 px większy div :) Przesunięcie ostatniej kolumny na dół było spowodowane tym, że "nie mieściła się w div'ie.
Przykładowo jeśli chcielibyśmy to trochę zrobić ładniej i sprawić, żeby test w div'ach był oddalony od ich krawędzi, przez co chyba bardziej czytelny robimy dokładnie to samo...
#lewo {
	padding:0 5px;
	width: 140px !important;
	width: 150px;
	float:left;
	}

#prawo {
	padding:0 5px;
	width: 140px !important;
	width: 150px;
	float:right;
	}

#srodek {
	padding:0 5px;
	width: 390px !important;
	width: 400px;
	float:left;
}

Wydaje mi się, że tak jest czytelniej....
Proponuję przy korzystaniu z div'ów nadawać każdemu z nich nadać tymczasowo parametr background-color przypisując każdemu z nich inny kolor, co ułatwi ich rozmieszczanie. Czasem zdarza się, że występują przerwy pomiędzy div'ami których przy jednolitym tle nie widać. Po prawidłowym rozmieszczeniu i zadowalającym wyglądzie ustalamy taki kolor jaki ma być pożądany...

Pozdrawiam
FireBoy


Jeśli sie zrobi tak jak ty to napisałes to strona w IE nie jest wyśrodkowana... :( POMOCY


Oto mój kod:

HTML:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="Description" CONTENT="Opis dokumentu">
<META NAME="Author" CONTENT="Autor dokumentu">
<TITLE>Tytuł</TITLE>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css" />
</HEAD>
<BODY>

	<div id="container">
	
	<div id="naglowek"> </div>

	<div id="lewo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div>

	<div id="srodek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>

	<div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. </div>

	<div id="stopka"> Created by Jan Kowalski</div>
	

	</div>	

</BODY>
</HTML>


I CSS:
<style type="text/css">

body {
		background-color: #000;
		margin: 0;
		padding: 0;
		text-align:center;
	}

div {
		font: verdana 12px #000;
		position:relative;
	}

#container {
		margin:0 auto;
		padding:0 5px 0 5px;
		position:relative;
		width: 700px !important;
		width: 710px; /* IE */
		background-color:#fff;
		text-align:left;
		clear: both;
}

#naglowek {
		background: #fff url(logo.jpg) no-repeat;
		width:700px;
		height:150px;
		margin-bottom:10px;
	}

#lewo {
	padding:0 5px;
	width: 140px !important;
	width: 150px;
	float:left;
	}

#prawo {
	padding:0 5px;
	width: 140px !important;
	width: 150px;
	float:right;
	}

#srodek {
	padding:0 5px;
	width: 390px !important;
	width: 400px;
	float:left;
}

#stopka {
		clear:both;
		text-align:center;
}

</style>

Dodaj obrazek
Dodaj obrazek
0

#24 Użytkownik jest niedostępny   lunsil 

  • Weteran
  • Grupa: Użytkownicy
  • Postów: 1634
  • Dołączył: 11-April 06
  • GG: 9583374
  • MiejscowośćKraków

Napisany 26 May 2007 - 08:42 PM

Zaraz po <BODY> daj <center> i tuż przed </BODY> daj </center>
Crystal Templates - [+][+][+][+][-][-][-][-][-][-] 40%
0

#25 Użytkownik jest niedostępny   neo92 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 452
  • Dołączył: 31-March 07

Napisany 26 May 2007 - 08:50 PM

Wtedy tekst tez mi sie bedzie centrował czy bede mog go jakos inczaej wyrownac?
Dodaj obrazek
Dodaj obrazek
0

#26 Użytkownik jest niedostępny   lunsil 

  • Weteran
  • Grupa: Użytkownicy
  • Postów: 1634
  • Dołączył: 11-April 06
  • GG: 9583374
  • MiejscowośćKraków

Napisany 26 May 2007 - 08:55 PM

Możesz dać w css dla danego diva text-align: left;
Crystal Templates - [+][+][+][+][-][-][-][-][-][-] 40%
0

#27 Użytkownik jest niedostępny   Deptul 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 20
  • Dołączył: 15-December 06
  • GG: 514454
  • MiejscowośćMwo

  Napisany 11 July 2007 - 06:43 PM

Widzę , że nikt nie raczy wrzucić od nowa efektu końcowego , więc zrobiłem to ja:

1 . Efekt końcowy: http://www.1touch.yoyo.pl/index2.html

2. Efekt końcowy z małymi poprawkami: http://www.1touch.yoyo.pl/

poprawki:

  • dodanie loga,
  • usunięty padding w #container,
  • #nagłowek , #lewo , #prawo , #srodek określony w procentach,
  • #srodek wy-justowany,
  • w #stopka , #lewo , #prawo zmieniony kolor,
  • zmienione wymiary.

xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
x---deptul@gmail.com----xxxxxxxxDEPTULxxxxxxxx--------gg:514454-------x
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
Dodaj obrazek
0

#28 Użytkownik jest niedostępny   BvHirador 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 20
  • Dołączył: 05-December 08
  • GG: 4593503

Napisany 08 December 2008 - 08:01 PM

Hm. Mi coś nie działa. Robię stronę testową - testuję hmtl'a i css, ale coś nie działa. Podam kod w całości: to jest kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Refresh" content="200">
<meta http-equiv="Reply-to" content="hirador@pino.pl">
<meta name="Keywords" content="test, strona, testowa, testowa strona, stronka, obrazki, grafika, grafik, gify, graphic">
<meta name="Description" content="Strona testowa Grafiki i/oraz test CSS">
<meta http-equiv="content-language" content="pl">
<meta http-equiv ="expires" content ="0">
<meta http-equiv ="cache-Control" content ="no-store, no-cache, must-revalidate">
<meta http-equiv ="cache-Control" content ="post-check=0, pre-check=0">
<meta http-equiv ="pragma" content ="no-cache">
<link rel="shortcut icon" href="ico.png">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="Robots" content ="all">
<title>Strona testowa z zamieszczaniem grafiki oraz test CSS</title>
</head>
<body bgcolor="#0066CC" text="White" link="Silver" alink="Silver" vlink="Silver" leftmargin="130" rightmargin="90" topmargin="50" bottommargin="50">
<!-- XT:JYkINyN5im143Mn226bfusvrkeImiVUyHhQ9RUUAlcL60r1gQ75p3RMOepxyh8lB -->
<style TYPE="text/css">
<!--
A:link, A:visited { text-decoration: none }
A:hover { font-weight:700 }
-->
body {
background-color: #0066CC;
margin: 0;
padding: 0;
text-align:center;
}

#container {
margin: 0 auto;
padding: 5px 5px;
position: relative;
width: 700px;
background-color: #0066CC;
text-align: left;
clear: both;
}

#banner {
background: url(banner.jpg) no-repeat;
width: 750px;
height: 212px;
margin-bottom: 10px;
}

#left {
width: 150px;
float: left;
}

#right {
width: 150px;
float: right;
}

#center {
width: 400px;
float: left;
}

#stopka {
clear: both;
text-align: center;
}

</style>
<center><div id="banner"> </div></center><br><br>
<div id="container">
<div align="left">
<table border="0" width="150" height="577" align="left" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" height="25">
<font size="1" face="Verdana">
<img border="0" src="menu.jpg" width="150" height="25"></font></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#0066CR">
<font size="1" face="Verdana">
<a href="#" style="text-decoration: none">
<span style="text-decoration: none">- Test</span></a><br>
<a target="_blank" href="#" style="text-decoration: none">- Test</a><br>
</font></td>
</tr>
</table>
</div>
<div id="center">&nbsp;&nbsp;&nbsp;LOL</div>
<div id="right">
<table border="0" width="150" height="577" align="right" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top" height="25">
<font size="1" face="Verdana">
<img border="0" src="menu.jpg" width="150" height="25"></font></td>
</tr>
<tr>
<td align="right" valign="top" bgcolor="#0066CR">
<font size="1" face="Verdana">
<a href="#" style="text-decoration: none">
<span style="text-decoration: none">- Test</span></a><br>
<a target="_blank" href="#" style="text-decoration: none">- Test</a><br>
</font></td>
</tr>
</table>
</div>
<div id="stopka">
</div>
</div>
</body>
</html>


Jakby ktoś mógłby mi wyjaśnić co tu jest nie tak... :(
0

#29 Użytkownik jest niedostępny   kapsell 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1128
  • Dołączył: 09-April 07
  • GG: 10303060

Napisany 08 December 2008 - 08:43 PM

Gotowy kod to:



Kod


<html>
<head>
  <title> strona 3-kolumnowa</title>
<style type="text/css">

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  text-align:center;
  }

div {
  font: verdana 12px #000;
  position:relative;
  }

#container {
  margin:0 auto;
  padding:0 0 0 0;
  position:relative;
  width:700px;
  background-color:#fff;
  text-align:left;
  clear: both;
  }

#naglowek {
  background: #fff url(logo.jpg) no-repeat;
  width:100%;
  height:24%;

  }

#lewo {
  width:20% ;
  float:left;
  background-color: grey ;
 padding: 1% ;
  }

#prawo {
  width: 20% ;
  float:right;
  background-color: grey ;
  padding: 1% ;
  }

#srodek {
  width: 54% ;
  float:left;
  padding: 1% ;
  text-align: justify ;

}

#stopka {
  clear:both;
  text-align:center;
  background-color: rgb(192,192,192) ;
}

#stopka2 {
 background-color: black;
  text-align: center ;
  padding-top: 17px ;
 }
a {
text-decoration:none ;
color: white ;

}

</style>
</head>

<body>
  <div id="container">

  <div id="naglowek"> </div>

  <div id="lewo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum.</div>

  <div id="srodek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>

  <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. </div>

  <div id="stopka"> Created by Jan Kowalski</div>
  <div id="stopka2"> <a href=http://www.webtips.pl/post6163.html>Webtips- forum dla Ciebie</a></div>

  </div>
   
    
</body>
<html>

0

Prześlij ten temat:


  • 2 Stron +
  • 1
  • 2
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień