| 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 obalu a contentu, 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: 13 let
|
|||
0