+- 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: Wyśrodkowanie strony (/thread-wy%C5%9Brodkowanie-strony)
Wyśrodkowanie strony - LoBo - 11-05-2010
Witam mam problem z wyśrodkowaniem content i lewego menu... content udało mi się wyśrodkowac, ale jak zrobić, żeby wraz z content lewe menu było przylegające do wyśrodkowanej kolumny z treścią ?
Kod:
html, body {
background-color: #eeeeee;
color: #000;
margin: 0;
padding: 0;
}
#top {
margin-left: auto;
margin-right: auto;
}
#head {
background-color: #888;
}
#left {
width: 242px;
float: left;
overflow: hidden;
position:absolute;
background-color: #eeeeee;
display:block;
}
#content {
width: 697px;
margin-left: 242px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
#foot {
clear: both;
background-color: #888;
}
#partners, #disclaimer{
width: 906px;
margin: auto;
padding: 0px;
clear: both;
}Kod:
<div id="top">
<div id="head"><?php require ('includes/logo.php'); ?></div>
<div id="left"><?php require ('includes/l_logowanie.php');
require ('includes/l_menu.php'); ?></div>
<div id="content"><?php require ('includes/srodek.php'); ?></div>
<div id="foot"><?php require ('includes/foot.php'); ?></div>
</div>RE: Wyśrodkowanie strony - Kartofelek - 11-05-2010
Nie dałeś blokowi top szerokości. Content ma, left też ma. Więc top również może mieć.
W ogóle dziwna nazwa top, skoro tam wszystko jest. Może lepiej all, albo page czy cos podobnego
RE: Wyśrodkowanie strony - ILIES - 11-05-2010
zmień swój top na:
#top {
width: 500px;
height: 500px
margin: o auto;
}
wartości są przykładowe
RE: Wyśrodkowanie strony - Kamyk - 18-05-2010
Witam Serdecznie
Słuchajcie mam problem na początku pokażę kod
co udało mi się wymodzić wiem że pewnie będzie zawierał błędy bo dopiero jestem początkujący 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>TYTUŁ</title>
<style type="text/css">
body {margin: 0;
padding: 0;
width:980px;
text-align:center;
position: relatvie; margin: 0px auto;
}
#TOP {width: 980px;
background-color: #660000;
height: 20px;
}
#NAGLOWEK { background-color: #CC0000;
height:150px;
background-image: url(GRAFIKA/Baner22.jpg);
background-repeat:no-repeat;
}
#HASLO {height:30px; background-color: #660000;}
#MENUPOZ {height:30px;
background-color: #660000;
text-decoration:none;
}
#MENUPOZ ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#MENUPOZ ul li {
float: left;
}
#MENUPOZ ul a:link, ul a:visited {
text-decoration: none;
display: block;
width: 80px;
text-align: center;
background-color: #ccc;
color: #000;
border: 2px outset #ccc;
padding: 5px;
}
#MENUPOZ ul a:hover {
border-style: inset;
padding: 7px 3px 3px 7px;
float: inherit;
}
#MENU {width: 150px;
height:500px;
float: left;
overflow: inherit;
background-color:#660000;
width:auto;
}
#MENU ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#MENU ul {
width: 150px;
}
#MENU ul a:link, ul a:visited {
display: block;
width: 136px;
text-decoration: none;
background-color: #663300;
color: #FFFFFF;
padding: 5px;
border: 1px outset #ccc;
font-size:12px;
}
#MENU ul a:hover {
border-style: inset;
padding: 8px 4px 4px 8px;
}
#TRESC {width: 680px;
float: left;
overflow:hidden;
background-color: #ECEAEC;
height:500px;
text-align:justify
}
#INFORMACJE {width: 150px;
float:right;
overflow:hidden;
background-color: #660000;
height:500px;
}
#STOPKA {clear:both;
width: 100%;
background-color:#660000;
}
.czcionka {color:#FFFFFF; margin-top:10px; font-size:24px;}
.text {margin-top:10px; margin-right:10px; margin-left:10px; margin-bottom:10px;}
.text2 {margin-top:10px; margin-right:10px; margin-left:10px; margin-bottom:10px;}
</style>
</head>
<body>
<div id="TOP">TOP</div>
<div id="NAGLOWEK"></div>
<div id="HASLO"><b><font class="czcionka">tekst hasła</font></b></div>
</div>
<div id="MENU">
<ul id="MENU">
<li><a href="link1.html">LINK</a></li>
<li><a href="link2.html">LINK</a></li>
<li><a href="link3.html">LINK</a></li>
<li><a href="link4.html">LINK</a></li>
<li><a href="link5.html">LINK</a></li>
<li><a href="link6.html">LINK</a></li>
<li><a href="link7.html">LINK</a></li>
<li><a href="link8.html">LINK</a></li>
<li><a href="link9.html">LINK</a></li>
</ul>
</div>
<div id="MENUPOZ">
<ul id="MENUPOZ">
<!--
<li><a href="link1.html">Link1</a></li>
<li><a href="link2.html">Link2</a></li>
<li><a href="link3.html">Link3</a></li>
<li><a href="link4.html">Link4</a></li>
-->
</ul>
<div id="TRESC"><p class="text">TEKST DOKUMENTU</b></p></div>
<div id="INFORMACJE">Info</div>
<div id="STOPKA"><font size="2px" color="white"><b>Copyright by ....</a></b></font></div>
</div>
</body>
</html>
Problem:
Mianowicie chodzi mi o ustawienie MENU POZ 2
MENU POZ - jest to normalne pionowe menu znajdujące się po lewej stronie zaś MENU Poz2 chciałem dać na sam środek i problem polega na tym że nie potrafię tego zrobić
Próbowałem to wsadzić w tabele ale np przy IE 6.0 niestety style padały tzn menu traciło kolor swój. no i oczywiście będę bardzo zobowiązany o wykazanie błędów
które popełniam od czegoś trzeba zacząć
RE: Wyśrodkowanie strony - ILIES - 18-05-2010
Zacznij od tego żeby pisać dla HTML 4.01 a nie HTML 1.0 (deklaracja DOCTYPE).
Nie używaj dużych liter w CSS i oddziel go od pliku HTML.
W body masz podwójnie zdeklarowane 'margin' i nie potrzebna jest deklaracja 'text-align:center' skoro i tak wszystko do lewej strony dociągasz.
Użyj sobie kontenera, żeby móc zapanować nad całością.
Uporządkuj sobie kod, używaj wcięć bo się pogubisz co gdzie masz, a nawet wstawiaj komentarze w stylu początek - koniec.
RE: Wyśrodkowanie strony - Kamyk - 18-05-2010
Aha rozumiem, zmiana deklaracji na Html 4.01
- Utworzenie kontenerów
- Oddzielenie stylów i wsadzenie je w oddzielny plikl
- nadal pozostaje kwestia jak wyśrodkować to menu
RE: Wyśrodkowanie strony - ILIES - 18-05-2010
wszystko po kolei, do wszystkiego dojdziesz i szybciej pomoc uzyskasz, bo w tym Twoim kodzie ciężko coś zobaczyć