+- 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: Pozycjonowanie w .css - krzaki. (/thread-pozycjonowanie-w-css-krzaki)
Pozycjonowanie w .css - krzaki. - Walassss - 18-06-2010
Witam wszystkich.
Postanowiłem zabrać się za robienie stron internetowych, i zacząłem studiować wszystkie poradniki, kursy itd.
Nie mogę sobie poradzić z pozycjonowaniem.
Na operze przy rozdzielczości 1366x768 wszystko jest okey, lecz na Mozilli już nie. Po zmianie rozdzielczości strona rozjeżdża się również w operze.
HTML:
Kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/polski.css" />
<title>POLSKI DESIGN - Personal Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="Table_01">
<div id="index-01"></div>
<div id="index-02"></div>
<div id="index-03"></div>
<div id="index-04">
<a href="http://p0lsk1.ugu.pl"><img src="images/index_04.png" width="159" height="63" alt=""></a>
</div>
<div id="index-05">
<a href="http://p0lsk1.ugu.pl/news.html"><img src="images/index_05.png" width="154" height="63" alt=""></a>
</div>
<div id="index-06">
<a href="http://p0lsk1.ugu.pl/gallery.html"><img src="images/index_06.png" width="185" height="63" alt=""></a>
</div>
<div id="index-07">
<a href="http://p0lsk1.ugu.pl/contact.html"><img src="images/index_07.png" width="169" height="63" alt=""></a>
</div>
<div id="index-08"></div>
<div id="index-09"></div>
<div id="index-10"></div>
<div id="index-11">
<a href="http://x3p-servers.com"><img src="images/index_11.png" width="241" height="47" alt=""></a>
</div>
<div id="index-12">
<a href="http://boomy.nl"><img src="images/index_12.png" width="214" height="47" alt=""></a>
</div>
<div id="index-13">
<img src="images/index_13.png" width="279" height="47" alt="">
</div>
</div>
</body>
</html>CSS
Kod:
#Table_01 {
width:800px;
margin-left:auto;
margin-right:auto;
}
#up
{
width:800px;
height:720px;
margin:0;
padding:0;
}
#index-01 {
width:800px;
height:163px;
background-image:url('http://p0lsk1.ugu.pl/images/index_01.png');
left:284px;
top:261px;
}
#index-02 {
width:36px;
height:557px;
background-image:url('http://p0lsk1.ugu.pl/images/index_02.png');
left:310px;
top:261px;
}
#index-03 {
position:absolute;
width:67px;
height:63px;
background-image:url('http://p0lsk1.ugu.pl/images/index_03.png');
left:310px;
top:261px;
}
#index-04 {
position:absolute;
width:159px;
height:63px;
left:377px;
top:261px;
}
#index-05 {
position:absolute;
left:536px;
top:261px;
width:154px;
height:63px;
}
#index-06 {
position:absolute;
left:690px;
top:261px;
width:185px;
height:63px;
}
#index-07 {
position:absolute;
left:875px;
top:261px;
width:169px;
height:63px;
}
#index-08 {
position:absolute;
left:1044px;
top:261px;
width:30px;
height:557px;
background-image:url('http://p0lsk1.ugu.pl/images/index_08.png');
}
#index-09 {
position:absolute;
left:310px;
top:324px;
width:734px;
height:404px;
background-image:url('http://p0lsk1.ugu.pl/images/index_09.png');
}
#index-10 {
position:absolute;
left:310px;
top:728px;
width:734px;
height:43px;
background-image:url('http://p0lsk1.ugu.pl/images/index_10.png');
}
#index-11 {
position:absolute;
left:310px;
top:771px;
width:241px;
height:47px;
}
#index-12 {
position:absolute;
left:551px;
top:771px;
width:214px;
height:47px;
}
#index-13 {
position:absolute;
left:765px;
top:771px;
width:279px;
height:47px;
}Adres strony to http://p0lsk1.ugu.pl
Pomoże mi ktoś? Walczę już z tym od godziny i nie mogę sobie poradzić
Pozdrawiam.
EDIT:
I jak usunąć te obramowania grafik z linkami... ?
RE: Pozycjonowanie w .css - krzaki. - Xaoo - 18-06-2010
Ja mam ten sam problem i jest on wywołany tym, że używasz position:absolute. Musisz napisać selektor np. kontener i w nim wypisać to czego chcesz.
Później używasz go w ten sposób:
main-tło
kontener
kolumna-treść
Kod:
div id="main" class="kontener">
class="kolumna">
TRESC</div>Obramowanie z menu usuniesz tym:
Kod:
img {
border:none;}RE: Pozycjonowanie w .css - krzaki. - Pedro84 - 18-06-2010
Małą różnica. Zabrałeś się, ale z użycie Adoba ImageReady, to widać. Cały kod do kosza, stron się tak nie buduje, zajrzyj na kurshtml.boo.pl a zobaczysz jak się buduje.
PS Ta strona jest całkowicie rozjechana.
RE: Pozycjonowanie w .css - krzaki. - Walassss - 18-06-2010
(18-06-2010, 13:55)Pedro84 napisał(a): Małą różnica. Zabrałeś się, ale z użycie Adoba ImageReady, to widać. Cały kod do kosza, stron się tak nie buduje, zajrzyj na kurshtml.boo.pl a zobaczysz jak się buduje.
PS Ta strona jest całkowicie rozjechana.
Hmmm możecie podesłać jakieś linki z tego kursu? Bo nie wiem gdzie szukać....
Tzn dużo tego jest.
Tak używałem ImageReady, ale kod jest w większości zmieniony, ale jak widać blednie.
EDIT:
Albo możesz mi powiedzieć jak dokładnie muszę to zrobić?
Z gory dziekuje
RE: Pozycjonowanie w .css - krzaki. - Pedro84 - 18-06-2010
(18-06-2010, 16:35)Walassss napisał(a):(18-06-2010, 13:55)Pedro84 napisał(a): Małą różnica. Zabrałeś się, ale z użycie Adoba ImageReady, to widać. Cały kod do kosza, stron się tak nie buduje, zajrzyj na kurshtml.boo.pl a zobaczysz jak się buduje.
PS Ta strona jest całkowicie rozjechana.
Hmmm możecie podesłać jakieś linki z tego kursu? Bo nie wiem gdzie szukać....
Tzn dużo tego jest.
Tak używałem ImageReady, ale kod jest w większości zmieniony, ale jak widać blednie.
EDIT:
Albo możesz mi powiedzieć jak dokładnie muszę to zrobić?
Z gory dziekuje
Przecież Ci podałem: http://kurshtml.boo.pl. Ucz się
RE: Pozycjonowanie w .css - krzaki. - dziamber - 18-06-2010
Po pierwsze to projektuj najpierw dla najnowszych przeglądarek. Po drugie to jak będzie wcisnięte wszędzie top, i left to daleko nie zajedziesz. Trudno to nazwać pozycjonowaniem elementów.
RE: Pozycjonowanie w .css - krzaki. - Walassss - 18-06-2010
No wiem, ale i tak nie wiem co i jak :p
EDIT:
No czytam o tym pozycjonowaniu, ale to jest tak beznadziejnie napisane że nic nie rozumiem z tych marginesów.
Powiecie przynajmniej jakimi funkcjami ustawić obrazek koło drugiego obrazka? ...