| Autor | Zpráva | ||
|---|---|---|---|
| kuku Profil * |
#1 · Zasláno: 4. 6. 2010, 14:54:01
Dobrý den,
chtěl bych poprosit někoho zkušeného kdo si vědět rady s tímto problém. Řeším takový problém, že mám tři divy které musí mít rozdílené pozadí a v těchto divech by byly další ve kterých by se už zobrazoval obsah. Bohužel co se mi nedaří je vytvořit zarovnání těchto obsahových divů na střed. Snad jsem to napsal nějak srozumitelně. Předem moc díky za každou radu.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: <strong class="highlight">center</strong>;
margin:0;
padding:0;
}
#mainDiv1 {
float:left;
margin: 0px auto;
width:100%;
min-height: 150px;
background: #FF0000;
}
#insideDiv {
float:left;
margin: 0px auto;
width: 300px;
height: 150px;
background: #09F;
position:relative;
left:50%;
}
#mainDiv2 {
float:left;
margin: 0px auto;
width:100%;
min-height: 150px;
background: #FF0000;
}
#insideDiv2 {
float:left;
margin: 0px auto;
width: 300px;
height: 500px;
background: #FFFF00;
position:relative;
left:50%;
}
#mainDiv3 {
float:left;
margin: 0px auto;
width:100%;
min-height: 150px;
background: #FF0000;
}
#insideDiv3 {
float:left;
margin: 0px auto;
width: 300px;
height: 200px;
background: #fff;
position:relative;
left:50%;
}
</style>
</head>
<body>
<div id="mainDiv1">
<div id="insideDiv">
test 1
</div>
</div>
<div id="mainDiv2">
<div id="insideDiv2">
test 2
</div>
</div>
<div id="mainDiv3">
<div id="insideDiv3">
test 2
</div>
</div>
</body>
</html>
|
||
| __construct Profil |
#2 · Zasláno: 4. 6. 2010, 15:16:27 · Upravil/a: __construct
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {text-align: center; margin:0; padding:0; background-color:red}
#obal{width:500px;margin:0 auto}
#prvy{min-height:100px;background-color:blue}
#druhy{min-height:100px;background-color:yellow}
#treti{min-height:100px;background-color:white}
</style>
</head>
<body>
<div id="obal">
<div id="prvy"></div>
<div id="druhy"></div>
<div id="treti"></div>
</div>
</body>
</html> |
||
| kuku Profil * |
#3 · Zasláno: 4. 6. 2010, 15:28:29
Moc děkuji za kód, ale já sjem to asi špatně vysvětlil. mě se jedná o to aby: insideDiv2 byl v prosteřed mainDiv2 a to stejné s těmi ostatními insideDiv3 v mainDIv3 atd.. Je to z toho důvodu že mainDiv2 bude mít jiné pozadí, mainDiv1 mainDov3 taky.
|
||
| kuku Profil * |
#4 · Zasláno: 4. 6. 2010, 15:29:36
ještě pro upřesnění ty mainDivy budou všechny mít 100% delku.
|
||
| kuku Profil * |
#5 · Zasláno: 4. 6. 2010, 20:37:04
Opravdu by se nenašel někdo s nějakou radou nebo alespoň ukázkou kódu?Děkuji
|
||
| Plaváček Profil |
#6 · Zasláno: 5. 6. 2010, 06:54:14 · Upravil/a: Plaváček
kuku:
Já tomu nerozumím. Můžeš dodat nějakou skicu, jak by to mělo vypadat? |
||
| kuku Profil * |
#7 · Zasláno: 5. 6. 2010, 12:53:51
Dobrý den,
zasilám skicu jak by to mělo vypadat. http://www.uloziste.net/thumb/8733/skica.jpg mainDiv by měl být přes celou stránku a insideDiv by měl být na střed toho divu. + teda jak jsem si s tím všera hrál, tak aby to ještě floutovalo. Ještě jednou moc děkuji za každý nápad jak tento problém vyřešit. |
||
| had Profil * |
#8 · Zasláno: 5. 6. 2010, 22:25:41
nevim jak u tebe, ale já třeba centrování celé stránky řeším takhle: margin: auto; (a celej div se vycentruje podle velikosti okna, takže předpokládám, že by to tady mohlo taky jít, ale kódem jsem se nezabýval).
|
||
| kuku Profil * |
#9 · Zasláno: 5. 6. 2010, 22:41:17
On není problém vycentrovat celou stránku, na to je na googlu hodně tutorialů. ale já právě řeším, že mám pozadí (body) které má 3 části: v hlavičce jinačí, v obsahu jinačí a v patičce taky. A ted jak udělat aby se zachovalo flatování (ze zvětšujícím se obsahem ze to celý bude posouvat dynamicky) + vycentrování na střed :-(
|
||
| Bubák Profil |
#10 · Zasláno: 5. 6. 2010, 22:45:12
had:
I když vím, jak se dělá horizontální centrování, tak z tvého popisu bych to nepochopil. kuku: Ze tvé malůvky nevím, o co se snažíš, nevidím na ní nic centrovaného a nechápu to ani z tvého kódu. Takže obecně. Pokud chceš blokový element horizontálně vycentrovat, musí mít šířku menší, než je šířka nadřazeného bloku, margin auto a nemůže floatovat, ani nesmí bát pozicovaný. U tvých bloků vidím, ze mají šířku 100% a float: left. |
||
| kuku Profil * |
#11 · Zasláno: 5. 6. 2010, 23:09:39
Asi na to možná jdu špatně. V odkazu zasílám ukázku poazadí. Snad to půjde dobře vidět: http://2i.cz/2f160d27f4. Nahoře pod hlavičkou jsou proužky ty se posouvat nikam nebudou. Potom ale následuje obsah - podním bude zelená. Obsah se bude zvětšovat podle obsahu a to je problém, protože se zvětšujícím se obsahem se musí posunout i patička, ve které je opět jinačí pozadí.
|
||
| Davex Profil |
#12 · Zasláno: 5. 6. 2010, 23:44:31
kuku:
Pokud jsem dobře pochopil co chceš, tak ti bude stačit podle Bubákovy rady všude v [#1] odstranit float: left, position: relative a left: 50%. Po zúžení body nebo #mainDivů na 90% to bude vypadat přesně podle představy. |
||
| kuku Profil * |
#13 · Zasláno: 5. 6. 2010, 23:47:35
A pokud se mi bude zvětšovat a zmenšovat rozlišení udrží se stránka i tak na středu? Zítra to vyzkouším a dám vědět, dnes už na to nemám sílu, ještě jednou všem díky
|
||
|
Časová prodleva: 14 let
|
|||
0