| Autor |
Wiadomość
|
| DeJk_SEBA |
 Wysłany: 21 Sie 2007, 13:37 Temat postu: Prosty Layout - pomoc |
  |
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
Witam chciałbym wykonać layout, lecz mi się nie udaje. Layout oczywiście w css. Chciałbym abyście pomogli mi zrobić layout wyglądający tak:
Może wam się wydawać że liczę na łatwiznę ale już zrobiłem z 5 lecz nie mogę dołączyć kolumny NR 3. Jeżeli możecie napiszcie prosto w css jak to zrobić. Nie musi być żadnych kolorów tylko żeby się tak trzymało jak na obrazku. Jak robię to zawsze kolumna nr 3 jest nad 2 i się rozszerza do tej szerokości. Proszę o pomoc. Z góry dziękuję.
Link do obrazka
_________________
 |
|
| Powrót do góry |
|
 |
| KCS |
| Wysłany: Temat postu: Reklama w KCS |
|
|
|
|
| Powrót do góry |
|
|
| cRaSh |
| Wysłany: 21 Sie 2007, 14:16 Temat postu: |
|
|
Gaduła
Dołączył: 19 Gru 2006
Posty: 272
Skąd: Lublin
|
|
| Powrót do góry |
|
|
| DeJk_SEBA |
| Wysłany: 21 Sie 2007, 15:16 Temat postu: |
|
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
cRaSh tylko ze tam nie ma nic podobnego do tego co ja chcę zrobić  . A ten program co jest udostępniony to mi wcale się nie przydał (używam kED'a).
_________________
|
|
| Powrót do góry |
|
|
| MacPain |
| Wysłany: 21 Sie 2007, 15:34 Temat postu: |
|
|
Gaduła
Dołączył: 18 Paź 2005
Posty: 245
|
Jeżeli może być w tabeli to prosze pokasuj co trzeba, wartości wpisałem żebyś widział jak to wygląda:
| Kod: | <table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="20">
1</td>
</tr>
<tr>
<td colspan="2" height="150" width="750">
2</td>
<td rowspan="2" height="480">
3</td>
</tr>
<tr>
<td width="550">
4</td>
<td width="200">
5</td>
</tr>
<tr>
<td colspan="3" height="20">
6</td>
</tr>
</table> | |
|
| Powrót do góry |
|
|
| DeJk_SEBA |
| Wysłany: 21 Sie 2007, 17:38 Temat postu: |
|
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
MacPain w tabelach to umiem takie cos ale gorzej w css o które mi chodzi. | DeJk_SEBA napisał: | | Layout oczywiście w css. |
_________________
|
|
| Powrót do góry |
|
|
| MacPain |
| Wysłany: 21 Sie 2007, 19:07 Temat postu: |
|
|
Gaduła
Dołączył: 18 Paź 2005
Posty: 245
|
To może tak index.html:
| Kod: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="jeden">
1
</div>
<div id="content">
<div id="dwa">
2
</div>
<div class="trzy">
3
</div>
<div class="cztery">
4
</div>
</div>
<div id="piec">
5
</div>
<div id="szesc">
6
</div>
</body>
</html>
|
i style.css:
| Kod: | body{
font-family: Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}
#jeden{
margin: 0;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
width: 1000px;
}
#content{
float:left;
width: 750px;
margin: 0;
border-left: 1px solid #cccccc;
}
#dwa{
border-bottom: 1px solid #ccc;
}
.trzy{
width:600px;
float:left;
border-bottom: 1px solid #ccc;
}
.cztery{
margin: 0 0 0 600px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#piec{
margin: 0 22px 0 750px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #cccccc;
height:380px;
}
#szesc{
margin: 0;
border: 1px solid #cccccc;
width: 1000px;
}
| |
|
| Powrót do góry |
|
|
| DeJk_SEBA |
| Wysłany: 21 Sie 2007, 20:50 Temat postu: |
|
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
MacPain Bardzo dziękuję ale nie rozumiem czemu przy dodaniu treści wszystko się rozlata
To może tak  Przekombinuj ten kod co ci dam dla css i dla xHTML tak aby "#prawa_kolumna" znalazła się tak jak na obrazku w pozycji 3.
Nie patrz na kolory na nic to jest tylko po to aby odznaczyć sobie. Jeżeli będziesz w stanie pomóc to ja będę bardzo wdzięczny i jak będziesz gdzieś w pobliżu zapraszam na piwo lub więcej
| Kod: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tytuł</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="nawigacja_gorna">
Nawigacja górna
</div>
<div class="prawa_kolumna">
<div id="menu"><div id="nazwa">Najnowsze wpisy</div>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archiwum</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Informacje</a></li>
<li><a href="#">Konakt</a></li>
</ul>
</div>
<div id="menu"><div id="nazwa">Najnowsze komentarze</div>
<ul>
<li><a href="#">Strona główna</a> w <a href="#">Strona główna</a></li>
<li><a href="#">Blog</a> w <a href="#">Strona główna</a></li>
<li><a href="#">Archiwum</a> w <a href="#">Strona główna</a></li>
<li><a href="#">Link</a> w <a href="#">Strona główna</a></li>
<li><a href="#">Informacje</a> w <a href="#">Strona główna</a></li>
<li><a href="#">Konakt</a> w <a href="#">Strona główna</a></li>
</ul>
</div>
</div>
<div id="menu"><div id="nazwa">Najnowsze wpisy</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="czysto"></div>
<div id="calosc">
<div id="gora">
<h3>This is the Header</h3>
<h4>This is the Header</h4>
</div>
<div id="nawigacja"><b>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archiwum</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Informacje</a></li>
<li><a href="#">Konakt</a></li>
</ul>
</b></div>
<div class="czysto"></div>
<div id="lewa_srodkowa_kolumna">
<div id="lewa_kolumna">
<div id="wpis">
<h1><a href="#">link tekstowy</a></h1>
<div id="informacje">Napisał <a href="#">DeJk_SEBA</a> 12 Maja 2007 r. Ocena: [+][+][+][+][-] 4 na 5 głosów.</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div id="informacje">Tagi: <a href="#">vero</a>, <a href="#">eos</a>, <a href="#">et</a>. Kategoria: <a href="#">Różne</a>.</div>
</div>
<div id="wpis">
<h1><a href="#">link tekstowy</a></h1>
<div id="informacje">Napisał <a href="#">DeJk_SEBA</a> 12 Maja 2007 r. Ocena: [+][+][+][+][-] 4 na 5 głosów.</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div id="informacje">Tagi: <a href="#">vero</a>, <a href="#">eos</a>, <a href="#">et</a>. Kategoria: <a href="#">Różne</a>.</div>
</div>
<div id="strony"><a href="#"><<</a> <a href="#"><</a> Strona <a href="#">1</a> z <a href="#">10</a> <a href="#">></a> <a href="#">>></a></div>
</div>
<div id="srodkowa_kolumna">
<div id="menu"><div id="nazwa">Linki</div>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archiwum</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Informacje</a></li>
<li><a href="#">Konakt</a></li>
</ul>
</div>
</div>
<div class="czysto"></div>
</div>
<div id="stopka">
Theme for <a href="#">WordPress</a> by <a href="#">DeJk_SEBA</a> for <a href="#">DeJk_SEBA.pl</a>
</div>
</div>
</body>
</html>
|
| Kod: |
/*
OpIs
*/
* {
padding: 0;
margin: 0;
}
h1{
}
h2{
}
h3{
}
h4{
}
h5{
}
a:link, a:visited {
text-decoration: none;
color: #eb7142;
}
a:hover {
text-decoration: underline;
color: #eb7142;
}
/* BODY */
html, body {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 13px;
background-color: #333;
}
#calosc {
margin: 0 auto;
width: 750px;
background-color: #ccc;
}
#nawigacja_gorna {
padding: 3px;
margin: 0 auto;
width: 1000px;
background-color: #eb7142;
color: #fff;
}
/* TOP */
#gora {
width: 750px;
padding: 0px;
height: 100px;
margin: 0px;
background: #888;
}
/* NAWIGACJA */
#nawigacja {
padding: 0px;
}
#nawigacja ul, #nawigacja ul li {
margin: 0px 5px 0px 0px;
padding: 0;
float: left;
display: block;
list-style: none;
}
#nawigacja ul a:link, #nawigacja ul a:visited {
padding: 5px;
text-decoration: none;
display: block;
text-align: center;
color: #eb7142;
}
#nawigacja ul a:hover {
text-decoration: none;
background-color: #eb7142;
color: #fff;
}
/* LEWA I SRODKOWA KOLUMNA */
#lewa_srodkowa_kolumna {
margin: 0px;
overflow: auto;
width: 100%;
border-top: 3px solid #eb7142;
border-bottom: 3px solid #eb7142;
}
/*LEWA KOLUMNA */
#lewa_kolumna {
display: inline;
margin: 0px;
padding: 4px;
width: 580px;
float: left;
}
/* SRODKOWA KOLUMNA */
#srodkowa_kolumna {
float: right;
margin: 0px;
padding: 4px;
width: 154px;
display: inline;
position: relative;
}
#srodkowa_kolumna ul, #srodkowa_kolumna ul li {
display: block;
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
}
#srodkowa_kolumna ul a:link, #srodkowa_kolumna ul a:visited {
display: block;
text-decoration: none;
padding: 0px;
background: #fff;
border-left: 3px solid #eb7142;
color: #eb7142;
}
#srodkowa_kolumna ul a:hover {
border-left: 3px solid #eb7142;
background: #eb7142;
color: #fff;
}
/* PRAWA KOLUMNA */
#prawa_kolumna {
float: right;
margin: 0px;
padding: 0px;
width: 158px;
display: inline;
position: relative;
border: 2px solid #eb7142;
}
/* STOPKA */
#stopka {
width: 750px;
clear: both;
margin: 0px auto;
padding: 0px;
}
/* WKLADKI KOLUMN */
#menu {
margin: 0px 0px 0px 0px;
padding: 0px;
/* border-top: 1px solid #eb7142;
border-bottom: 2px solid #eb7142;*/
}
#nazwa {
color: #000;
text-align: center;
font-size: 15px;
border: 1px solid #eb7142;
}
#wpis {
padding: 0px;
margin: 0px 0px 0px 0px;
border-bottom: 3px solid #eb7142;
background-color: #fd9;
}
#informacje {
padding: 0px;
margin: 0px 0px 0px 0px;
font-size: 10px;
background-color: #fff;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
}
#strony {
text-align: center;
}
/* INNE */
.czysto {
clear: both;
background: none;
}
|
ps. jest to wersja z wieloma brakami ale najważniejsze jest to żeby prawą kolumnie zrobić tak aby była po prawej stronie
ps2. wiem ze kod nie jest w najlepszym stanie dla "w3c validator" ale na razie chodzi o to by css był tak zrobiony żeby było tak jak na obrazku
edit ps3. i oczywiści wszystko przylega jak w tym moim 
_________________
|
|
| Powrót do góry |
|
|
| MacPain |
| Wysłany: 21 Sie 2007, 22:19 Temat postu: |
|
|
Gaduła
Dołączył: 18 Paź 2005
Posty: 245
|
Proszę tak i życze miłej zabawy:
| Kod: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="jeden">
<div id="globalNav"><a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a> <a href="#">global link</a></div>
</div>
<div id="content">
<div id="dwa">
<div id="subMenuNav"><a href="#">sub menu link</a> <a href="#">sub menu link</a> <a href="#">sub menu link</a> <a href="#">sub menu link</a> <a href="#">sub menu link</a> <a href="#">sub menu link</a></div>
</div>
<div class="trzy">
<div id="linkTekstowy">
<a href="#">link tekstowy</a><br />
</div>
Napisał <a href="#">DeJk_SEBA</a> 12 Maja 2007 r. Ocena: [+][+][+][+][-] 4 na 5 głosów.
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<div id="tagi">Tagi: <a href="#">vero</a>, <a href="#">eos</a>, <a href="#">et</a>. Kategoria: <a href="#">Różne</a>.</div>
<div id="strony"><a href="#"></a> <a href="#"></a> Strona <a href="#">1</a> z <a href="#">10</a> <a href="#"></a> <a href="#"></a></div>
</div>
<div class="cztery">
<div id="linki">
LINKI
</div>
<div id="linkiMenu"><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a><a href="#">sub menu link</a></div>
</div>
</div>
<div id="piec">
<div style="padding:2px;">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>
<div id="szesc">
<div id="stopka">
Theme for <a href="#">WordPress</a> by <a href="#">DeJk_SEBA</a> for <a href="#">DeJk_SEBA.pl</a>
</div>
</div>
</body>
</html>
|
| Kod: |
body{
font-family: Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}
#jeden{
margin: 0;
padding-bottom:1px;
border: 1px solid #cccccc;
border-bottom: 3px solid #CC3333;
width: 1000px;
background-color:#CCCCCC;
}
#content{
float:left;
width: 750px;
margin: 0;
border-left: 1px solid #cccccc;
}
#dwa{
padding-bottom:1px;
border-bottom: 1px solid #999999;
background-color:#999999;
border-bottom: 3px solid #CC3333;
}
.trzy{
width:600px;
float:left;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.cztery{
margin: 0 0 0 600px;
border-bottom: 1px solid #ccc;
}
#piec{
margin: 0 22px 0 750px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #cccccc;
}
#szesc{
margin: 0;
border: 1px solid #cccccc;
width: 1000px;
}
a{
color:#000000;
text-decoration:none;
}
#globalNav a{
text-decoration:none;
background-color:#CCCCCC;
padding:2px 6px 2px 6px;
}#globalNav a:hover{
text-decoration:none;
background-color:#999999;
padding:2px 6px 2px 6px;
}
#subMenuNav a{
font-size:85%;
text-decoration:none;
background-color:#999999;
padding:2px 6px 2px 6px;
}#subMenuNav a:hover{
font-size:85%;
text-decoration:none;
background-color:#CCCCCC;
padding:2px 6px 2px 6px;
}
#linkTekstowy{
font-size:140%;
padding-top:10px;
padding-bottom:10px;
}
#linki{
text-align:center;
border-bottom:
1px solid #cccccc;
background-color:#CCCCCC;
}
#linkiMenu a{
display:block;
text-decoration:none;
padding:0px 0px 1px 6px;
}#linkiMenu a:hover{
text-decoration:none;
background-color:#999999;
}
#tagi{
font-size:65%;
}
#strony{
text-align:center;
font-size:75%;
}
#stopka{
text-align:center;
font-size:75%;
}
| |
|
| Powrót do góry |
|
|
| DeJk_SEBA |
| Wysłany: 21 Sie 2007, 23:09 Temat postu: |
|
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
MacPain Nie wiem jak ci się odwdzięczę za to... choć i tak nie jest tak jak chce... Lecz już cię nie będę wykorzystywał. Temat proszę o zamknięcie... no chyba że ktoś umie zrobić
| DeJk_SEBA napisał: | | Przekombinuj ten kod co ci dam dla css i dla xHTML tak aby "#prawa_kolumna" znalazła się tak jak na obrazku w pozycji 3. |
ale na moim kodzie lub żeby wyglądał tak samo.
edps. no kolory mogą zniknąć ale ułożenie tak samo 
_________________
|
|
| Powrót do góry |
|
|
| MacPain |
| Wysłany: 21 Sie 2007, 23:27 Temat postu: |
|
|
Gaduła
Dołączył: 18 Paź 2005
Posty: 245
|
| Zrobiłem tak jak chciałeś na początku reszta należy do ciebie musisz to dostosowac pod swój projekt. |
|
| Powrót do góry |
|
|
| DeJk_SEBA |
| Wysłany: 22 Sie 2007, 00:05 Temat postu: |
|
|
Czasem tu wpada...
Dołączył: 29 Paź 2006
Posty: 93
Skąd: Goszczanów
|
MacPain Mój projekt ci dałem w 1 z moich postów, tylko nie umiem przenieść sekcji #prawa_kolumna tak aby było jak na obrazku (czyli 3 kolumna). Twój projekt rozlatywał mi się pod FF. Ale i tak dzięki za chęci
_________________
|
|
| Powrót do góry |
|
|
|
|
