☰

» »

HTML in CSS težava pri razporeditvi DIV elementov

HTML in CSS težava pri razporeditvi DIV elementov

SkIDiver ::

Imam HTML datoteko s tremi div elementi. Posamezni div pa vsebuje ostale HTML elemente.
Težava je, da nikakor ne morem razporediti div elementov s pomočjo CSS-ja kot prikazuje spodnja slika.



Če div-a z id=1 in 2 spravim v svoj položaj z lastnostjo float:left; se div z id=3 raztegne do vrha. Kako dosežem, da se div z id=3 ne bo raztegnil do vrha (če vrh slike predstavlja vrh strani v brskalniku) in bo ostal pod div z id=1 in 2?

Širino strani sem določil v CSS-ju kot je prikazano spodaj. Višina strani ni določena.
body{
	width:800px;
	margin:auto;
	}
  • spremenil: SkIDiver ()

blackbfm ::

1 in 2 naj bosta display: inline-block, pa nastavi jima višino...float pa odstrani

če pa hočeš točno tako kot si napisal pa pri div 3 nastavi margin-top

Zgodovina sprememb…

  • spremenilo: blackbfm ()

SkIDiver ::

Najlepša hvala! Rešitev sem dosegel, da sem div id=2 odstranil float:left in dodal display: inline-block. Če div id=1 nima float:left potem je vsak div v svoji "vrstici".

k--p ::

Lahko tudi dodaš še v div 3 float:left; ali pa clear:left.
Pa priporocljivo je se uporabit clearfix trick, ker se ti drugace parent element pomanjsa (v tvojem primeru body), ko elementom znotraj spremenis float. Je isto, kot da bi jih "vzel ven" iz parenta.

Zgodovina sprememb…

  • spremenilo: k--p ()

SkIDiver ::

Najlepša hvala za pomoč. Mogoče kakšna referenca o clearfix trick-u? Body mi je res razširilo iz 800px na 802px. Nič groznega, vendar me vseeno zanima kako dosežem svoje.

k--p ::

Clear-fix se uporabi, da ko elemente znotraj parent elementa floatas, da se le-ta ne pomanjsa, ker vec ne vsebuje floatanih elementov. http://nicolasgallagher.com/micro-clear...
Parentu dodas npr. class cf, ter copy-paste-aš kodo z linka v css.

To, da ti je razsirilo parent pa je verjetno nekaj drugega, ker float vpliva predvsem na visino parent elementa. Mogoce mas dodan se kak padding oz. border v velikosti 1px na vsaki strani. To se dodatno prišteje širini.

SkIDiver ::

Najlepša hvala. Res je, border 1px imam na vsaki strani, ki mi doda k širini.

SkIDiver ::

Spet pri težavi z div-i:)

Zgodba podobna kot zgoraj, samo da je v igri več DIV elementov. V osnovi uporabljam tri DIV elemente, da razporedim vsebino strani. TOP za vrh strani, CONTENT za osrednji del in RIGHTS za nogo.
CONTENT DIV imam razdeljen na LEFT in CENTER z DIV-i. Težava mi povzroča CENTER DIV-ki se pomakne na levi rob, jaz pa želim, da je pozicioniran pri desnem robu LEFT DIV-a. Torej nekako tako kot pri zgornji sliki div id=1 in div id=2 s tem, da sta oba DIV-a ovita še v dodatni DIV element CONTENT.

Takšno delitev z DIV-i uporabljam za kasnejše lažje spreminjanje vsebine in izgleda spletne strani.

PS: Robove sem dodal, da vidim velikost in pozicijo posameznega DIV-a.

HTML koda:
<body>
		<div id="top">
			<div id="logo">
				
			</div>
		</div>
		<div id="content">
			<div id="left">
				<div id="navigation">
					
				</div>
			</div>
			<div id="center">
				<div id="note">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
			</div>	
		</div>
		<div id="rights">
			
		</div>
	</body>


CSS:
body {
	width:1000px;
	margin:auto;
	margin-top:10px;
	background-color:rgb(255,255,255);
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#top {
	width:auto;
	height:121px;
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#logo {
	width:300px;
	height:inherit;
	margin:0px;
	padding:0px;
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#content {
	width:1000px;
	height:400px;
	margin:20px 0px 0px 0px;
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#left {
	float:left;
	width:250px;
	height:inherit;
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#navigation {
	border-style:solid;
	border-width:1px;
	border-color:red;
}

#center {
	width:750px;
	height:inherit;
	border-style:solid;
	border-width:1px;
	border-color:green;
}

#note {
	border-style:solid;
	border-width:1px;
	border-color:red;
}

JayKay ::

centru daj float:left; in ne pozabi da border doda k sirini elementa: 250+2x1px + 750 +2x1px > 1000px

SkIDiver ::

Centru sem že dodal float:left;. Ga vrže pod LEFT in CONTENT na levi rob:|

Vem, da border doda. V končni obliki ne bo robov, zato jih nisem vračunal v 1000px širine;)

PS: Sicer lahko rešim, če dodam margin-left:250px; v CENTER ampak ne želim takšne rešitve.

Zgodovina sprememb…

  • spremenil: SkIDiver ()

JayKay :: 

#center {
    width:750px;
    height:inherit;
    border-style:solid;
    border-width:1px;
    border-color:green;
}


kje?

SkIDiver ::

Po tvojem predlogu sem dodal, pa ni bilo spremembe. Sem pa CENTER nastavil width:746px; in voila. Seveda, robovi:D Hvala za pomoč in opozorilo, ki sem ga napačno razumel;)

JayKay ::

np. za boljse razumevanje box modela http://www.w3schools.com/css/css_boxmod...

SkIDiver ::

Poznam:)

RockyS ::

Naslednjič uporabi jsfiddle, da se nas lahko več vključi v debato.

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297331030 (55179) htmltroubles
»

Tabela/razpredelnica v html kodi

Oddelek: Programiranje		6785 (695) Yacked2
»

CSS dimenzije in pozicije

Oddelek: Izdelava spletišč		171259 (987) marjan_h
»

[CSS] Div brez 5mm razmaka

Oddelek: Izdelava spletišč		5507 (476) Veron
»

kako naj napravim spletno stran da bo animirala v operi

Oddelek: Izdelava spletišč		301055 (942) pitagora

Več podobnih tem