+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe (/thread-css-uklad-3-kolumn-jak-wcisnac-%C5%9Brodkowa-miedzy-dwie-pozostale)
Strony:
1
2
[CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - Szorstki - 27-10-2010
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
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - KeeL - 27-10-2010
Hmm nie wiem czy dobrze zrozumiałem, ale może zrób tak:
Boczne kolumny ustaw na sztywno, a środkową w % np 70%.
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - Szorstki - 27-10-2010
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...
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - KeeL - 27-10-2010
(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
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - Szorstki - 27-10-2010
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>CSS
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
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - KeeL - 27-10-2010
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ą.
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - Szorstki - 27-10-2010
(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.
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - KeeL - 27-10-2010
No, więc masz złą kolejność w HTML, i dlatego jak wyrównujesz to Ci źle wychodzi.
PS Styluj w arkuszu.
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - Szorstki - 27-10-2010
Jak napisałem - nie mogę zmienić niczego w HTML (takie ćwiczenie z CSS, żeby wszystko ustawić stylem).
RE: [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe - KeeL - 27-10-2010
(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.