Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Elemento centravimas


Elemento centravimas

pauliukas
Bendruomenės narys

 
Tema paskelbta: 2011-03-07 13:36:25
Sveiki pirma karta bandau koduoti tema pagal jusu video ir mano headeris ne per viduri kaip padaryti kad header butu per viduri? Stai kaip jis dabar atrodo http://img703.imageshack.us/i/logotipas.png/
 
Puslapiai:



Atsakymai į temą

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2011-03-07 13:56:08 [#1117] Atsakymo ID: 1117 Ilgalaikė nuoroda į atsakymą #1
Jau daug kartų buvo tai aptarta diskusijų forumuose, galėjai pasinaudoti paieška.

Paprasčiausiai priskiri blokui ilgį (width) ir nurodai margin: 0 auto.

selektorius { width: 450px; margin: 0 auto; }
pauliukas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-07 14:23:26 [#1118] Atsakymo ID: 1118 Ilgalaikė nuoroda į atsakymą #2
Labai dekui. Kita karta ieskosiu kituose forumuose
pauliukas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-07 16:40:42 [#1120] Atsakymo ID: 1120 Ilgalaikė nuoroda į atsakymą #3
Kaip padaryti dabar kad ten raysitu nepaciam sone o po pagrindinis nuorada ? http://img33.imageshack.us/i/logotipas2.png/ 

#header { width: 903px; height: 239px; margin: 0 auto; background: url(../images/header.png) no-repeat; }

#meniu  { width: 903px; height: 43px; margin: 0 auto; background: url(../images/meniu.png) ; }

#side { width: 35%; height: 400px; float: left; border-right: 1px solid black; }

#Content { width: 63%; height: 400px; float: right; border-left: 1px solid black; }

#link { width: 45; height: auto; float: left; }

#link ul { list-style-type: none; }

#link li { display: inline; }
Pask. redagavo pauliukas (2011-03-07 16:59:59), redaguota kartų: 1

pauliukas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-09 18:52:04 [#1123] Atsakymo ID: 1123 Ilgalaikė nuoroda į atsakymą #4
Gal kas gali padeti ?
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2011-03-10 13:06:07 [#1124] Atsakymo ID: 1124 Ilgalaikė nuoroda į atsakymą #5
Visą turinį dėk į vieną bendrą bloką ir jį išcentruok.

#wrapper { width: 903px; margin: 0 auto; }

#header { width: 903px; height: 239px; background: url(../images/header.png) no-repeat; }

#meniu  { width: 903px; height: 43px; background: url(../images/meniu.png) ; }

#side { width: 35%; height: 400px; float: left; border-right: 1px solid black; }

#content { width: 63%; height: 400px; float: right; border-left: 1px solid black; }

#link { width: 45px; height: auto; float: left; }

#link ul { list-style-type: none; }

#link li { display: inline; }


<div id="wrapper">

	<div id="header">



	</div>

	<div id="meniu">

		<ul>
			<li><a href="#"></a></li>
		</ul>

	</div>

	<div id="side">



	</div>

	<div id="content">



	</div>

</div> <!-- #wrapper pabaiga -->
pauliukas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-14 15:34:55 [#1138] Atsakymo ID: 1138 Ilgalaikė nuoroda į atsakymą #6
Iskylo dar viena problema. Tarp Side blocko ir Categories yra tarpas o man jis turi buti sujunktas stai kaip dabar atrodo http://img46.imageshack.us/i/dizaainas.png/ kaip taip padaryti 

body
{

        font-family: "Kozuka Gothic Pro", Arial, Sans-Serif;
		font-size: 80%;
		background-color: #FFFFFF;
		

	    
}

.clear { clear: both; }

/* DIV'ai */

#wrapper { width: 903px; margin: 0 auto; }

#header { width: 903px; height: 239px; background: url(../images/header.png) no-repeat; }
 
#meniu  { width: 883px; height: 43px; padding: 0 0 0 20px; background: url(../images/meniu.png) ; }
 
#catogories { width: 250px; height: 43px; }
#categories h1 { font-size: 0.9em; color: white; background: url(../images/SIde.png) no-repeat; padding: 16px 0px 10px 30px; }

#categories ul { list-style-type: none;  background: url(../images/sidebg.png) repeat-y;}

#categories li a { color: white; text-decoration: none; }

#side{ width: 35%; height: auto; float: left;}

#content { width: 63%; auto: 400px; float: right; }
 
#link { width: 45; height: auto; float: left; }
 
#link ul { list-style-type: none; }
 
#link li { display: inline; margin: 0 0 0 10px; }

#link li a { display: inline-block; color: white; text-decoration: none;}

#footer { width: 903px; height: 30px; background: black; }
krekas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-14 21:36:47 [#1139] Atsakymo ID: 1139 Ilgalaikė nuoroda į atsakymą #7
O width bandei didinti?
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2011-03-14 22:14:39 [#1140] Atsakymo ID: 1140 Ilgalaikė nuoroda į atsakymą #8
#content { width: 63%; auto: 400px; float: right; }

Kas čia? Nėra tokios savybės kaip auto. Būk atidesnis.
pauliukas
Bendruomenės narys

 
Atsakymas parašytas: 2011-03-14 23:39:11 [#1141] Atsakymo ID: 1141 Ilgalaikė nuoroda į atsakymą #9
Krekai bandziau , dideja tik i apacia nezinau kaip padaryt kad uzdengtu ta skyle gal tar kokiu pasiulymu yra ?

Edmundai aciu uz pastebejima
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2011-03-14 23:46:35 [#1142] Atsakymo ID: 1142 Ilgalaikė nuoroda į atsakymą #10
Tavo problema susijusi su atitraukimais (margin ir padding). Keletą kartų jau buvau minėjęs forumuose, kitose temose, jog galutinės elemento dimensijos priklauso ne tik nuo nurodyto ilgio ir pločio, tačiau ir nuo atitraukimų.

Pavyzdžiui, jeigu bloko ilgis yra 200px ir pridedi padding iš abiejų šonų (kairės ir dešinės), tarkime, po 20px, tai galutinis bloko ilgis bus ne tie patys 200px, o 240, nes 200 + 20 + 20 = 240.

Sėkmės.

Puslapiai: