Autor Zpráva
l.e.n.u.l.a8
Profil
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
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>
Stránku máš (iba som si nasimuloval, aby som mal čo štýlovať).
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;
}
Toto vyššie uvedené je najjednoduchší spôsob. A funkčný.
habendorf
Profil
Kubo2:
Toto vyššie uvedené je najjednoduchší spôsob. A funkčný.

No když už nejjednodušší, tak



body
{
position: relative;
}


/*
...
tvoj design
*/

div#IsPage
{
position: relative;
width: 760px; /*vlastná *pevná* šírka*/
height: auto;
margin-left: auto;
margin-right: auto;

margin: 0 auto;
}

Jo a mimochodem, h1 máš mimo centrovaný blok.
Str4wberry
Profil
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 *
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
Tohle už je jen teorie, většinou existují rozumné důvody, proč oddělit obsah od body.
Str4wberry
Profil
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
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
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
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
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;
}
Kdyžtak mi prosím řekněte co kde smazat a co přidat :)
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
Petr ZZZ:
dopsala jsem a pořád nic... nevím čím to je :-/
_es
Profil
l.e.n.u.l.a8:
Skontroluj si, kde všade máš float:left.
l.e.n.u.l.a8
Profil
_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 &copy;. All rights reserved. Design by Lenka Ungrová
    </div>

</div>
</body>

</html>
Petr ZZZ
Profil
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
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
jenikkozak:
Děkuju moc, už mi to funguje :) na tohle bych fakt nepřišla :D
creds
Profil
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 *
Chtěl bych se zeptat, zda to funguje i na prvky s procentuální šířkou, protože mě to nedunguje.
margin
Profil *
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
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
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
Děkuji za rady, raději to zamkněte.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: