Autor | Zpráva | ||
---|---|---|---|
l.e.n.u.l.a8 Profil |
#1 · Zasláno: 19. 2. 2013, 22:53:46
Ahoj, vím, že těchto dotazů tu bude asi několik. Našla by se nějak dobrá duše, která by mi pomohla vycentrovat stránku ? Zkoušela jsem už snad vše a pořád mi to nejde. Pravděpodobně v kódování mám nějakou chybu nebo mi tam naopak něco chybí. Potřebovala bych někoho kdo by po mě projel css styl a našel popřípadě vytvořil styl, který by vycetroval stránku. Najde se někdo ?
|
||
habendorf Profil |
#2 · Zasláno: 19. 2. 2013, 23:08:26
No pokud nám ten web neukážeš, můžeme se bavit akorát tak na obecné rovině.
|
||
Kubo2 Profil |
habendorf:
„akorát tak na obecné rovině.“ Tak teda „obecně“ začnem. Najjednoduchšie je, ak si stránku obalíš do jedného divu, ten potom naštýluješ. Príklad (súbor stranka.html): <html> <head> <title>Tvoja stránka</title> </head> <body> <h1 id="MainTitle">Nadpis</h1> <div id="IsPage"> <p> Odstavec...</p> <!-- ľubovoľný obsah tvojej stránky --> </div> </body> </html> súbor mojstyl.css: body { position: relative; } /* ... tvoj design */ div#IsPage { position: relative; width: 760px; /*vlastná *pevná* šírka*/ height: auto; margin-left: auto; margin-right: auto; } |
||
habendorf Profil |
Kubo2:
„Toto vyššie uvedené je najjednoduchší spôsob. A funkčný.“ No když už nejjednodušší, tak { position: relative; } /* ... tvoj design */ { width: 760px; /*vlastná *pevná* šírka*/ margin-left: auto; margin-right: auto; margin: 0 auto; } Jo a mimochodem, h1 máš mimo centrovaný blok. |
||
Str4wberry Profil |
#5 · Zasláno: 20. 2. 2013, 00:36:52
Když už jsme u toho zjednodušování, tak HTML:
<!doctype html> <title>Tvoja stránka</title> <h1>Nadpis</h1> <p>Odstavec... A CSS: body {width: 760px; margin: 0 auto} |
||
margin Profil * |
#6 · Zasláno: 20. 2. 2013, 01:58:19
Já si dovolím pokračovat drobnou úpravou:
body {width: 760px; margin: auto} Věděl jsem, že to funguje a jako bonus zdarma je, že ani CSS validátor neprotestuje, teď jsem našel vysvětlení v CSS specifikaci: http://www.w3.org/TR/CSS2/visudet.html#normal-block "If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0." |
||
habendorf Profil |
#7 · Zasláno: 20. 2. 2013, 12:09:16
Tohle už je jen teorie, většinou existují rozumné důvody, proč oddělit obsah od body.
|
||
Str4wberry Profil |
#8 · Zasláno: 20. 2. 2013, 12:18:25
Vážně? Spíš bych tipoval, že většinou existují rozumné důvody použít právě
<body> bez zbytečného <div> u.
|
||
habendorf Profil |
#9 · Zasláno: 20. 2. 2013, 12:45:11
Věčná otázka ... já asi víc hledím na zpětnou kompatibilitu. Jak dostaneš třeba dvě pozadí na element html?
|
||
Str4wberry Profil |
#10 · Zasláno: 20. 2. 2013, 13:20:50
Pokud se nepletu, tak kompatibilita je IE6+. (Ty ještě ladíš pro starší prohlížeče?)
„Jak dostaneš třeba dvě pozadí na element html?“ Nedojdeme ale touto úvahou k tomu, že většinou existují rozumné důvody psát <h1><span>Nadpis</span></h1> atd.?
|
||
habendorf Profil |
#11 · Zasláno: 20. 2. 2013, 13:30:30
Str4wberry:
„Pokud se nepletu, tak kompatibilita je IE6+.“ Pro dvě pozadí na jednom elementu? „Nedojdeme ale touto úvahou k tomu, že většinou existují rozumné důvody psát <h1><span>Nadpis</span></h1> atd.?“ Někdy je to třeba, ale pro pozadí stránky je to jaksi častější. Ale začíná to sklouzávat k debatě o ničem ... |
||
l.e.n.u.l.a8 Profil |
#12 · Zasláno: 20. 2. 2013, 13:46:47
Zkoušela jsem to a prostě nic.
jedná se o tuhle stránku http://bigli-agi.ic.cz/ a styl je takto: *{ margin:0px; padding:0px } img{border:0px;} html{ width:100%; height:100%; } body{ width:1024px; height:100%; background-image:url(images/logo.jpg); background-position:top; background-repeat:no-repeat; background-color:#5d1d1d ; font-family:Segoe Script; font-size:13px; color:#333333; } h3 {color: red; font-style: italic;} #meta{ float:right; padding:31px 70px 0 0 } #meta a{ color:#42030E; text-decoration:underline; display:block; float:left } #meta a:visited{text-decoration:underline} #meta a:hover{text-decoration:none} #meta span{ padding:0 25px 0 0; float:left } #meta img{ float:left; margin:0 6px 0 0; } #menu{ margin:415px 0 0 0; float:left; width:995px; height:78px; text-align:center font-family:Arial; } #menu ul{ width:900px; margin:0 auto; font-family:Arial; } #menu li{ float:left; list-style-type:none; font-family:Arial; } #menu li a{ display:block; float:left; background-position:bottom; background-repeat:no-repeat font-family:Arial; } #menu li a:hover{ background-image:url(images/arrow.gif); font-family:Arial } #menu li a.active{ background-image:url(images/arrow.gif); font-family:Arial } #content{ background-image:url(images/content_bg.gif); background-position:top left; background-repeat:repeat-y; float:left; width:1024px; margin:0px 0 0 0; display:inline } .navigation{ width:200px; float:left; margin:0px 0px 0px 0px; } .navigation ul{ margin:6px 0 50px 15px; list-style-type:none; font-size:13px; } .navigation li{ background-image:url(images/li_bg.gif); background-position:top left; background-repeat:no-repeat; height:20px; padding:4px 0 0 20px; } .navigation li a{ text-decoration:none; color:#535353 } .center{ width:483px; float:left; } .text{ width:451px; padding:10px 19px 5px 13px; font-family:Segoe Script; } .text p{ padding:15px 15px 5px 0; font-family:Segoe Script; } .news_events{ width:258px; float:left; padding:24px 0 0 0; margin:0 0 0 0; } .latest{ margin:14px 0 26px 10px; } .news{ position:relative; margin:18px 0 0 0px; float:left } .news p{ width:200px; padding:0 0 5px 8px; margin:0 0 0 29px; border-left:6px solid #DED6AC } .data{ position:absolute; top:0px; left:0px; font-weight:bold; width:35px; border-bottom:1px solid #DED6AC; background-color:#FFFFFF } .more{ border-left:6px solid #8E190B; display:block; float:left; margin:0 0 0 29px; display:inline; padding:0 0 0 8px } .more a{ color:#8E190B; text-decoration:underline; } .more a:visited{text-decoration:underline} .more a:hover{text-decoration:none} #footer{ width:953px; float:left; text-align:center; color:#323232; margin:0 200px 0 200px; } #footer a{ color:#323232; text-decoration:none; margin:0 5px 0 15px } #footer a:visited{text-decoration:none} #footer a:hover{text-decoration:underline} #copyright{ width:953px; float:left; text-align:center; padding:10px 0; margin:0 200px 0 200px; } #copyright a{ color:#8E190B; text-decoration:underline } #copyright a:visited{text-decoration:underline} #copyright a:hover{text-decoration:none} .about{ padding:25px 0 0 33px; width:652px; float:left } .about p{ width:595px; padding:15px 0 0 0 } .list{ width:257px; float:left; padding:25px 0 0 0 } .list ul{ margin:17px 0 15px 13px; list-style-type:none } .list li{ background-image:url(images/bullet.gif); background-position:0px 4px; background-repeat:no-repeat; line-height:20px; padding:0 0 0 19px; } .inner_copy{ border:0; color:#fff; float:right; width:0.09%!important; margin:-100px; overflow:hidden; line-height:0px; padding:0px; font-size:11px } div#IsPage { position: relative; width: 1024px; /*vlastná *pevná* šírka*/ height: auto; margin-left: auto; margin-right: auto; } |
||
Petr ZZZ Profil |
Reaguji na l.e.n.u.l.u8:
Tam jak máš body { width:1024px; atd...} , tak si do toho doplň
body { width:1024px; margin: 0 auto; atd...} |
||
l.e.n.u.l.a8 Profil |
#14 · Zasláno: 20. 2. 2013, 14:13:31
Petr ZZZ:
dopsala jsem a pořád nic... nevím čím to je :-/ |
||
_es Profil |
#15 · Zasláno: 20. 2. 2013, 14:22:15
l.e.n.u.l.a8:
Skontroluj si, kde všade máš float:left .
|
||
l.e.n.u.l.a8 Profil |
#16 · Zasláno: 20. 2. 2013, 18:25:42 · Upravil/a: l.e.n.u.l.a8
_es,
No já nevím. kde je navíc... zas tak moc se ve stylech nevyznám :) Tady ještě ta stránka, jesli tam není něco, co by to "blokovalo" <html> <head> <meta charset="windows-1250"><! určuje kódování> <title>Bigl agi</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body bgcolor=#895D50> <div id="obal"> <div id="menu"> <ul> <li><a href="onas.html" class="active"><img src="images/but1.png" align=top ></a></li> <li><a href="agility.html" class="active"><img src="images/but2.png" align=top ></a></li> <li><a href="kurzy.html" class="actice"><img src="images/but3.png" align=top ></a></li> <li><a href="tabory.html" class="active"><img src="images/but4.png" align=top ></a></li> <li><a href="denicek.html"><img src="images/but5.png" alt="" ></a></li> <li><a href="ostatni.html"><img src="images/but6.png" alt="" ></a></li> <br> </ul> <! tag ul a li tvoří menu> </div> <div id="content"> <div class="navigation"><ul></ul></div> <div class="center"> <div class="text"> <font size=4> <b> Vítej :)</b></font> <p><font size=3>Snad jen něco málo na úvod. <b>Bernee</b> je taková drobnější úprava bígla. Je křížený bůhví s čím, ale opravdu se povedl. Má vzhled a dlouhé uši bígla, je drobnější a vychytralý jako pouliční ratlík. Doma tomuhle „plemenu“ říkáme <b>Beagle Street</b>. </p> <p> Do světa <b>agility</b> jsme byli zasvěceni až letos, tedy v roce 2013. Kromě aktivit a zábavy mého čoklíka jsem se také začala zajímat o jeho stravu. Úspěšně jsme tedy přešli z granulí na přirozenou stravu nebo-li <b>BARF</b>. </p> <img src="images/uvod.jpg"> </font></div> </div> <div class="news_events"> <img src="images/title2.gif" alt="" width="258" height="21" /><br /> <img src="images/DSCN0242.jpg" alt="" width="217" height="144" class="latest" /><br /> <img src="images/title3.gif" alt="" width="258" height="22" /><br /> <div class="news"> <div class="data">3.2.</div> <p>Co je u nás nového? Co nás těší a co naopak trápí? </p> <div class="more"><a href="http://bigli-agi.ic.cz/cojenoveho.html">Číst dál</a></div> </div> <div class="news"> <div class="data">24.1.</div> <p>Sice je ještě zima, ale my už se těšíme na léto! a tak jsme odeslali přihlášku na tábor všech psích sportů Svojanov! </p> <div class="more"><a href="http://bigli-agi.ic.cz/svojanov.html">Číst dál</a></div> <br> <br> </div> </div> <br> </div> <div id="footer"> <div> <a href="index.html">Home</a> | <a href="index2.html">About Club</a> | <a href="index2.html">News</a> | <a href="index2.html">Photogallery</a> | <a href="index2.html">Sponsors</a> | <a href="index2.html">Contact us</a> </div> </div> <div id="copyright"> Copyright ©. All rights reserved. Design by Lenka Ungrová </div> </div> </body> </html> |
||
Petr ZZZ Profil |
#17 · Zasláno: 20. 2. 2013, 19:32:14
l.e.n.u.l.a8:
Nedopsala. Mimochodem, tohle není komentář: <! určuje kódování>
a tohle taky ne: <! tag ul a li tvoří menu> .
Komentáře v HTML vypadají takto: <!-- určuje kódování -->
a takto: <!-- tag ul a li tvoří menu -->
Všiml jsem si syntaktické chyby v CSS (možná tam toho bude víc, nevím): text-align:centerfont-family:Arial; (chybí středník: text-align:center;font-family:Arial; )
|
||
l.e.n.u.l.a8 Profil |
#18 · Zasláno: 20. 2. 2013, 19:48:04
Petr ZZZ:
Děkuju, možná jich tam bude víc, já už to v tom nevidím... Jen mě rozčiluje, že nevím proč nejde co centrování |
||
jenikkozak Profil |
l.e.n.u.l.a8:
Prvku body buď vezmi nastavení šířky, nebo zápis margin:0. To nastavuješ tímto zápisem na řádku 12:
body { margin: 0; padding: 0; } Pak si spočítej, že součty šířek prvků navigation , center a news_events nedává součet 1024 px, které uvádíš u obal u a content u, ale 941 px. Když tedy přenastavíš i tyto hodnoty, budeš mít content na středu. (Jinak bude o pár pixelů posunutý.)
|
||
l.e.n.u.l.a8 Profil |
#20 · Zasláno: 20. 2. 2013, 20:43:20
jenikkozak:
Děkuju moc, už mi to funguje :) na tohle bych fakt nepřišla :D |
||
Časová prodleva: 1 měsíc
|
|||
creds Profil |
#21 · Zasláno: 28. 3. 2013, 20:09:53
Ahoj, zkouším dle výše uvedeného problému l.e.n.u.l.i8...leč marně...
Kde dělám ve vycentrování stránky chybu prosím? http://www.jokereleven.xf.cz/ Dík předem moc na rady a výtky..:)) L. |
||
vojja01 Profil * |
#22 · Zasláno: 29. 3. 2013, 12:01:34
Chtěl bych se zeptat, zda to funguje i na prvky s procentuální šířkou, protože mě to nedunguje.
|
||
margin Profil * |
#23 · Zasláno: 29. 3. 2013, 14:52:34
creds:
Na stránce není vidět ani pokus o to, že by ses chtěl řídit výše uvedenými radami. vojja01: Funguje, není důvod, proč by nemělo, procenta jsou jednotka, jako každá jiná. Ostatně sis mohl udělat pokus a nahradit procenta třeba za pixely rychle bys zjistil, že chyba bude jinde. |
||
creds Profil |
#24 · Zasláno: 29. 3. 2013, 16:06:46
margin:
To rechts, je to původní kód, v tom jak jsem to testoval, by se už nikdo pak nevyznal...tím jsem si jist... Takže pokus / omyl, jdu opět zkoušet.. |
||
creds Profil |
#25 · Zasláno: 29. 3. 2013, 21:13:14
Tak nad tím ještě sedím....zkusil jsem ř.13, zlepšilo se, ale....Nevím, zda se mi nemlátí ř.11 a 13 v součtu 1150px...?? Taky jsem si všiml a snad nevadí šířka jpg pozadí v hlavičce v % a výška v px...No, kdyby měl prosím někdo radu, jistě uvítám...Dík
|
||
creds Profil |
#26 · Zasláno: 31. 3. 2013, 09:09:39
Děkuji za rady, raději to zamkněte.
|
||
Časová prodleva: 11 let
|
0