Cześć. Mógłby ktoś przepisać stronkę zrobioną za pomocą div na tabele? Chciałbym zrozumieć tą zasadę budowy na tabelach - wiem, iż jest to niepraktyczne, ale chcę zobaczyć jak to się robi, bo tabele to dla mnie czarna magia. Próbowałem przerobić projekt z tutoriala M. Zelent'a, ale miesza mi się od tych tabel w głowie, a muszę się z nimi męczyć, bo są potrzebne do szkoły.
Kod HTML i CSS - divy
<!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <title>Poznaj Linuxa :)</title> <meta name="description" content="Serwis poœwiêcony systemowi Linux. Naucz siê wszystkiego, co chcesz wiedzieæ o Linuxie!" /> <meta name="keywords" content="linux, kurs, nauka, poznaj, co to jest linux, ubuntu, debian, mint, fedora, wybierz dystrybucjê, instalacja linux, polecenia, terminal, bash" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div id="logo"> Poznaj Linuxa :) </div> <div id="menu"> <div class="option">Strona g³ówna</div> <div class="option">Dystrybucje</div> <div class="option">Instalacja</div> <div class="option">Polecenia</div> <div class="option">Linus Torvalds</div> <div class="option">O projekcie</div> <div style="clear:both;"></div> </div> <div id="topbar"> <div id="topbarL"> <img src="linux.png" /> </div> <div id="topbarR"> <span class="bigtitle">O projekcie s³ów kilka</span> <div style="height: 15px;"></div> Kiedy mówisz: "Napisa³em program, który wywali³ Windows, ludzie gapi¹ siê na Ciebie g³upkowato i mówi¹: Hej, ja dosta³em to wraz z systemem, za darmo" - Linus Torvalds, twórca Linuxa :) Zapraszamy do zapoznania siê z witryn¹, dziêki której dowiesz siê co to jest Linux i wybierzesz dystrybucjê dla siebie! </div> <div style="clear:both;"></div> </div> <div id="sidebar"> <div class="optionL">Strona g³ówna</div> <div class="optionL">Dystrybucje</div> <div class="optionL">Instalacja</div> <div class="optionL">Polecenia</div> <div class="optionL">Linus Torvalds</div> <div class="optionL">O projekcie</div> </div> <div id="content"> <span class="bigtitle">Dlaczego Linux?</span> <div class="dottedline"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia mollis odio eu bibendum. Praesent non hendrerit risus. Nulla id semper sem. Mauris risus mauris, ultrices sed ullamcorper sed, vulputate vel nisi. Aliquam augue ante, mattis in pulvinar vitae, ultrices nec leo. Nulla ultricies augue enim, sit amet semper tellus vulputate sit amet. Maecenas tincidunt, ex eu viverra scelerisque, quam lectus auctor nunc, at pretium nibh lacus in ligula. Cras condimentum felis ac aliquet tristique. Sed elementum eu nulla vel rutrum. Cras feugiat nulla non congue malesuada. <br /><br /> Cras et nulla vehicula, efficitur enim non, fermentum tortor. Curabitur id elementum leo. Sed eget turpis accumsan dolor mollis imperdiet. Praesent pellentesque laoreet lectus, at commodo magna varius vitae. Aliquam erat volutpat. Curabitur commodo, tortor laoreet sagittis cursus, nulla enim laoreet libero, et egestas risus ante vel orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis posuere massa, sed sollicitudin lorem. Mauris lacinia, massa efficitur malesuada luctus, arcu ex mattis erat, a venenatis magna risus nec neque. Nulla vulputate nisl urna, quis egestas orci suscipit tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras auctor nec elit at ultricies. Morbi aliquam pharetra diam, vitae porta felis. Pellentesque vel arcu tincidunt, luctus justo quis, ultrices erat. Vivamus efficitur leo vitae dui molestie, eu varius sapien iaculis. In quis pharetra mauris. <br /><br /> Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh. </div> <div id="footer"> Poznaj Linuxa - najlepszy darmowy system operacyjny. Strona w sieci od 2014r. © Wszelkie prawa zastrze¿one </div> </div> </body> </html>
body
{
background-color: #404040;
font-family: 'Lato', sans-serif;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: white;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: #ffffff;
padding: 10px;
}
#topbar
{
background-color: #128870;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
}
#topbarL
{
float:left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px dotted #cccccc;
}
#topbarR
{
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#sidebar
{
float: left;
width: 148px;
min-height: 620px;
padding:20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
border-right: 2px dotted #666666;
}
#content
{
float: left;
padding: 40px;
width: 730px;
background-color: #dedede;
min-height: 580px;
text-align: justify;
}
#footer
{
clear: both;
color: white;
text-align: center;
padding: 20px;
font-size: 18px;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px dotted #444444;
opacity: 0.8;
}
.option:hover
{
background-color: #000000;
cursor: pointer;
}
.optionL
{
font-size:18px;
height:25px;
padding: 10px;
border-bottom: 2px dotted #444444;
}
.optionL:hover
{
background-color: #f36742;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
.dottedline
{
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444;
}
To nie musi być konkretnie ta strona, może być inna - chodzi tylko o różnicę i zrozumienie.