|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
[CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe
|
Liczba postów: 31
Liczba wątków: 8
Dołączył: 30-11-2008
Reputacja:
0
27-10-2010, 00:51
(Ten post był ostatnio modyfikowany: 27-10-2010, 02:20 przez Szorstki.)
Witam ponownie 
Próbuję zrobić coś takiego:
![[Obrazek: 43464274.gif]](http://img4.imageshack.us/img4/2263/43464274.gif)
problem pojawia się przy wciśnięciu treści między dwie kolumny. Nie załatwia tego ani clear: none;, ani float. Ustawienie na sztywno szerokości nie wchodzi w grę, bo treść ma się rozciągać, a dwie kolumny po bokach muszą pozostawać takie same.
Do bloków oznaczonych na rysunku jako 4 i 5 dałem odpowiednio float left i right, jednak nijak środek się nie słucha
Byłbym wdzięczny za rady
Pozdrawiam
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
Hmm nie wiem czy dobrze zrozumiałem, ale może zrób tak:
Boczne kolumny ustaw na sztywno, a środkową w % np 70%.
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
Liczba postów: 31
Liczba wątków: 8
Dołączył: 30-11-2008
Reputacja:
0
27-10-2010, 01:00
(Ten post był ostatnio modyfikowany: 27-10-2010, 01:08 przez Szorstki.)
Boczne są na sztywno, wyrównane do boków - tak jak trzeba (floatem).
Problem jest tylko taki, że środek "nie wskakuje" w powstałą lukę, próbowałem mu też nadać float - left, right, none - i nic. Clear: none też nic nie daje, pomysły mi się ogólnie skończyły i nie wiem jak to zrobić :/
Przed chwilą ustawiłem #pojemnik na display: table-row, a #treść, #menu i #panel na display: table-cell. #stopka jako table-row niestety też jest wyświetlana obok, a nie pod spodem (wcześniej dałem jej clear: both; i była na dole), więc chyba nie tędy droga...
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
(27-10-2010, 01:00)Szorstki napisał(a): Boczne są na sztywno, wyrównane do boków - tak jak trzeba (floatem).
Problem jest tylko taki, że środek "nie wskakuje" w powstałą lukę, próbowałem mu też nadać float - left, right, none - i nic. Clear: none też nic nie daje, pomysły mi się ogólnie skończyły i nie wiem jak to zrobić :/
Przed chwilą ustawiłem #pojemnik na display: table-row, a #treść, #menu i #panel na display: table-cell. #stopka jako table-row niestety też jest wyświetlana obok, a nie pod spodem (wcześniej dałem jej clear: both; i była na dole), więc chyba nie tędy droga...
Pokaż kod
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
Liczba postów: 31
Liczba wątków: 8
Dołączył: 30-11-2008
Reputacja:
0
27-10-2010, 01:10
(Ten post był ostatnio modyfikowany: 27-10-2010, 01:30 przez Szorstki.)
HTML
Kod: <?xml version="1.0" encoding="UTF-8"?>
<!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>Outer Space Turns 100</title>
<link href="zad.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="images/logo.png" alt="The Outer Space" width="350" height="74" id="logo"/><img src="images/badge.png" alt="badge" width="78" height="78" id="badge"/>
<ul>
<li class="seperator"><a href="#">Subscribe</a></li><li><a href="#">About Us</a></li>
</ul>
</div>
<div id="mainNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Quiz</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Horoscopes</a></li>
</ul>
</div>
<div id="contentWrapper">
<div id="main">
<h1>Outer Space Celebrates its 100th Anniversary!</h1>
<div class="figure">
<img src="images/figure.png" alt="figure" width="200" height="186" />
<p>The Outer Space</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h2>2000: Lorem ipsum dolor sit amet </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h2>2004: Lorem ipsum dolor sit amet, consectetuer </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h2>2009: Lorem ipsum dolor sit amet, consectetuer adipiscing elit </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="sidebar">
<h2>In the News</h2>
<h3><a href="#">Breakthrough Technology Announced </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
<h3><a href="#">Outer Space Turns 100 </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali.</p>
<h3><a href="#">Three more join Outer Space </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali.</p>
<h2>Around the Web </h2>
<h3><a href="#">Teleportation Tips </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<h3><a href="#">Startrek Tales </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<h2>What’s Hot </h2>
<h3><a href="#">The OuterSpace Trophy </a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut</p>
<h3><a href="#">Smith and Hawking</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </p>
<h2>Today’s Horoscope </h2>
<h3>Lorem: dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </p>
</div>
<div id="adverts">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<p id="copyright">Copyright 2010, OuterSpace.org</p>
</div>
</div>
</body>
</html>
Kod: body {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
display: inline;
}
img {
border: none;
margin: 0px;
padding: 0px;
}
img[alt="The Outer Space"] {
position: relative;
top: 0px;
left: 50px;
}
img[alt="badge"] {
position: absolute;
top: 0px;
left: 0px;
}
.figure p {
width: 80px;
height: 40px;
background: white;
border: solid 1px dotted;
margin: -50px 0px 0px 0px;
padding: 0px;
text-align: center;
}
/* HEADERS */
h1, h2, h3, h3 a {
color: #663900;
}
/* BLOK G£ÓWNY */
#wrapper {
margin: 20px;
padding: 0px;
min-width: 860px;
border: 1px solid black;
}
/* BANNER */
#banner {
background: url("images/banner.png") top right no-repeat;
display: block;
}
#banner ul {
float: right;
margin: 50px 70px 0px 0px;
}
#banner ul li a {
color: #6f6667;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
font-family: Tahoma, Geneva, sans-serif;
padding: 0px 10px;
height: 11px;
}
.seperator a {
border-right: 1px solid black;
}
/* MENU NAWIGACJI */
#mainNav ul {
height: 28px;
display: block;
background: url("images/bg_nav.png");
padding: 0px;
margin: 0px;
}
#mainNav ul li a {
color: white;
text-decoration: none;
font-family: Arial;
font-weight: bold;
font-size: 14px;
line-height: 28px;
display: block;
float: left;
padding: 0px 10px;
margin: 0px;
border-right: 1px solid black;
}
#mainNav ul li a:hover {
background: url("images/bg_nav_h.png");
}
#contentWrapper {
display: table;
}
/* SIDEBAR */
#sidebar {
display: table-cell;
width: 200px;
}
/* MAIN */
#main {
display: table-cell;
min-width: 300px;
}
/* ADVERTS */
#adverts {
display: table-cell;
width: 100px;
}
/* FOOTER */
#copyright {
display: table-row;
}
Gdyby ktoś chciał zip'a z grafikami:
http://www.2shared.com/file/VmaI-Fy_/4-CSS.html
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
adverts div to jest ten div co ma być w środku?
jeżeli tak musisz zamienić go kolejnością, żeby też był w środku między dwoma które go otaczają.
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
Liczba postów: 31
Liczba wątków: 8
Dołączył: 30-11-2008
Reputacja:
0
(27-10-2010, 01:15)KeeL napisał(a): adverts div to jest ten div co ma być w środku?
jeżeli tak musisz zamienić go kolejnością, żeby też był w środku między dwoma które go otaczają.
Nie mogę zmieniać nic w HTML, a adverts ma być po prawej, sidebar po lewej, a main w środku.
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
No, więc masz złą kolejność w HTML, i dlatego jak wyrównujesz to Ci źle wychodzi.
PS Styluj w arkuszu.
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
Liczba postów: 31
Liczba wątków: 8
Dołączył: 30-11-2008
Reputacja:
0
Jak napisałem - nie mogę zmienić niczego w HTML (takie ćwiczenie z CSS, żeby wszystko ustawić stylem).
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
(27-10-2010, 01:20)Szorstki napisał(a): Jak napisałem - nie mogę zmienić niczego w HTML (takie ćwiczenie z CSS, żeby wszystko ustawić stylem).
W takim razie musisz to inaczej stylować relatywnie, bo w takim ukladzie HTML chyba, nie jestem pewny ale się nie da inaczej.
Po zamianie miejscami tych 2 div możesz normalnie floatem.
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
|
| Podobne wątki… |
| Wątek: |
Autor |
Odpowiedzi: |
Wyświetleń: |
Ostatni post |
| |
[JS] Dzielenie tablicy na dwie tablice |
rejcz |
1 |
3,417 |
05-10-2013, 01:34
Ostatni post: msx83
|
| |
[CSS] problematyczny układ strony |
nc715 |
8 |
6,009 |
04-01-2012, 18:52
Ostatni post: nc715
|
|
układ divów jak tekst w gazecie - jak uzyskać? |
Ace |
7 |
6,891 |
02-01-2012, 21:30
Ostatni post: Kartofelek
|
| |
[css] odleglosci miedzy divami w pionie |
grzesiek77 |
6 |
4,318 |
27-12-2011, 14:17
Ostatni post: grzesiek77
|
| |
Przejścia między podstronami |
Marys |
1 |
2,168 |
05-11-2011, 22:30
Ostatni post: Kartofelek
|
Użytkownicy przeglądający ten wątek:
|
|
|
Sponsorzy i przyjaciele
|
|
|
