Jump to content
php.lv forumi

Width:auto relatīvi konteinera div elementam


Maris-S

Recommended Posts

Tātad kārtējo reizi nevar dabūt ko vajag IE6.

 

Visumā doma sekojoša - mājas lapai jābūt 3 kolonās, bet kopējam platumam jābūt vai nu pa visu lapu, vai arī ne mazākam par noteiktu platumu, mainīgais platums ir vidējai kolonai.

 

Kods kas darbojas pārsvarā visur (izņemot ie6) ir sekojošs:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Width in container</title>

<style type="text/css">
	div.min_width {
		width: 800px;
		background-color: orange;
	}

	div#container {
		min-width: 800px;
		position: relative;
		border: solid 1px;
	}

	div#column_1, div#column_3 {
		width: 150px;
		height: 700px;
		position: absolute;
		top: 0px;
		background-color: lime;
	}

	div#column_1 {
		left: 0px;
	}

	div#column_2 {
		height: 700px;
		position: relative;
		margin: 0px 150px;
		background-color: yellow;
		border: solid 1px;
	}

	div#column_3 {
		right: 0px;
	}
</style>
</head>

<body>
<div id="container">
	<div id="column_1"></div>
	<div id="column_2"></div>
	<div id="column_3"></div>

	<div class="min_width"></div>
</div>
</body>
</html>

 

Css salīdzinoši vienkāršs, ir konteinera div, kuram ir min-width, protams šo lietu neatbalsta ie6, tāpēc speciāli viņam ir izveidota papildus klase .min_widht, kas tiek piešķirta div elementam, kas ir ielikts konteinera elementā, ir divas kolonas ar norādītu platumu un pozicionētas katra savā pusē un ir vidējā kolona, kas tiek nobīdīta no malējām kolonām ar margin palīdzību. Tik tālu strādā normāli, minimālo platumu sanāk ierobežot, bet vidējā kolona sasniedzot minimālo platumu turpinās samazināties (uz ie6 pārlūka). Sākumā domāju ka ie6 netiek pareizi apstrādāts margin un ka tas apstrādājas nevis atbilstoši konteinerim, bet body elementam. Tomēr galu galā sapratu ka problēma ir tieši ar platumu. Ja konteinerim nav konkrēts platums, tad ie6 platumu nevar apstrādāt atbilstoši parent elementam, bet gan dara to pēc body elementa vai arī pēc pirmā parent elementa, kam platums ir norādīts.

 

Problēmu domāju varētu atrisināt izveidojot atbilstošu .min_width klasi arī vidējai kolonai ar atbilstošu platumu, bet tīri intereses pēc, varbūt kāds zin, kā varētu iestāstīt ie6 pārlūkam, ka width:auto jāizmanto atbilstoši konteinera div elementam, nevis bodyjam, pat ja konteinerim nav norādīts konkrēts latums?

Edited by Maris-S
Link to comment
Share on other sites

Marcis, ar paddingu sanāks tas pat. Problēma ir nevis marginos un paddingos, bet gan ka nenoteikta platuma konteineri ie6 pārlūks nevar izmantot lai atbilstoši viņam veidotu iekšējā div platumu. Izskatās ka tas ir bug, vienkārša risinājuma izskatās ka nav.

 

Mefisto, paldies par linku, domāju min-width simulācija ar borderi strādās, konkrēti šim gadījumam vēl neizmēģināju. Šoreiz problēmu atrisināju vienkārši ieliekot vidējā kolonā vēl vienu platumu ierobežojošu div, man vienkārši šī pieeja mazliet mazāk sarežģīta koda ziņa liekās, protams katram ērtākas liekas savas pieejas. Gribējās vienkārši atrast risinājumu platuma norādīšanai, ja nu noder kur citur.

Link to comment
Share on other sites

Paldies, piemērs nav slikts, tāds man varētu nākotnē noderēt, bet kas position sliktāks par float? Iespējams ka kļūdos, bet kā vienu no sarežģījumiem paddingu pieejai redzu to ka būs sarežģītāk izveidot kolonas ar dažādiem backgroundiem atstājot atstarpes starp kolonām kur nav nekāda backgrounda. Vēl vajadzēs paturēt prātā visu laiku paddingus, gadījumā ja nu parādīsies vajadzība vidējā daļā ko pozicionēt, var protams pozicionēšanu veikt ņemot vērā malējo kolonu izmērus, bet tad mainot kolonas platumu būs jāmaina arī pozicionētais elements. Šīs lietas uz ātro ienāca prātā, gan jau var arī risinājumus viņām atrast. Jebkurā gadījumā visām pieejām ir priekšrocības un trūkumi. Neuzskatu par sliktu ne pozicionēšanas un marginu pieeju, ne arī floatu un paddingu pieeju.

Edited by Maris-S
Link to comment
Share on other sites

Marginus un paddingus es ļoti labi protu pielietot. Nemaz arī attaisnojumu neesmu meklējis. Vienkārši pamatoju dažādu pieeju priekšrocības un trūkumus. Kas slikts notiek ja es izņemu elementu no lapas layouta konkrētajā gadījumā? Pie tam, ja paddingi ir īstais paņēmiens ko jālieto un pozicionēšana ir vienkārši nelietojama, tad jau varēji arī manis aprakstīto problēmu risinājumus parādīt.

Link to comment
Share on other sites

Redz' , tad kad tu taisīsi _īstas_ mājaslapas, tu ievērosi , ka tam ir tada lieta kā footeri.

Un tavā koda footeris var būt tikai tad, ja saturs ( div#column_2 ) ir garāks vai tik pat augst, kā abas malas.

Jo malas ir pozicionētas absolūti un "neizpiež kontēneri".

 

 

Anyway, http://innonesen.se/test/l-6-mod-minwidth/

Nav diez ko elegants variant, bet man par šito neviens nemaksā.

Link to comment
Share on other sites

Nu laikam daži uzskata par īstajām lapām tās kurām ir footeri, katram savi kritēriji mājas lapu novērtēšanā. :) Tomēr ja paskatās uzmanīgi sākotnējo piemēru, tur ir skaidri un gaiši redzams ka visām kolonām ir konkrēts augstums, kādas problēmas tad šajā gadījuma būs ar footera pievienošanu, pat ja tas būs vajadzīgs? Pie tam sākotnējais jautājums vispār ir par platuma attēlošanu, kam ar ideālu augstuma veidošanu nav nekāda sakara. Pat ja es izmantotu Tevis parādīto piemēru (ar float right un left) un ja man vajadzētu footeri vai arī vienāda augstuma kolonas es tā noteikti darītu, es izmantotu marginus nevis paddingus, kāpēc uzskatu marginus labākus par padding es jau paskaidroju.

Link to comment
Share on other sites

Bļins , kur tu tāds gudrs radies.

Re ku tev .. salīdzini : http://haslayout.net/css/

 

http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug

http://haslayout.net/css/Double-Margin-Bug

http://haslayout.net/css/Negative-Margin-Bug

http://haslayout.net/css/Form-Control-Double-Margin-Bug

 

 

P.S. .. emm .. un tu gadījumā nejauc cēloņus un sekas ?

Es taicu, ka īstās mājaslapās ir footeri , nevis , footeri (manā izpratnē) parada mājaslapas par īstām.

Link to comment
Share on other sites

Un ko tad es tur salīdzināšu vai ieraudzīšu? To ka IE pārlūki ir pilni ar dažādām problēmām? To es pats labi zinu un ne reizi vien esmu pieminējis. Starp citu, pats sāki protestēt, kad es teicu ka IE ir problēmas (http://php.lv/f/topic/15134-div-layout-fons/page__hl__Pozicion%C4%93%C5%A1ana), tagad tā kā nevajadzētu teikt tieši pretējo. Pie tam ja pa google pameklēsi 3 kolonu layoutu atradīsi arī marginu pieeju. Arī ja piemērā, kura linku Tu iedevi, nomainīt kontenta kolonai paddingu uz marginu IE viņš strādās precīzi (IETester, īsta IE6 pa rokai nav). Es vispār nevaru iebraukt kādu jūtu vadīti cilvēki tur ir ielikuši paddingu. Trūkumus paddingam jau pieminēju, bet tā vietā lai brauktu virsū varēji tak iemest risinājumu, vēl labāk pamatojumu kāpēc šis risinājums būs labāks par margin pieeju.

 

Es nejaucu cēloņus un sekas, ar to es gribēju pateikt ka footerim ar īstu lapu nav nekāda sakara. Piezīme par to ka absolute pozicionēšana šādā gadījumā nederēs ir tieši laikā, bet tas nepadara konkrētu lapu par īstu vai neīstu, gadījumos ja footeris nav vajadzīgs, tad viņu nav tur jāliek, tas lapu nepadarīs īstāku, bet gan neatbilstošu prasībām. Priekš kam man jādomā par augstumu gadījumos kad tas nav vajadzīgs!? Īsta lapa ir tāda, kas strādā precīzi pēc iespējas vairāk pārlūkos un ir izveidota pēc prasībām, ja nav footeris, tad viņu tur likt nevajag un palielināt kodu viņā dēļ arī nevajag.

Edited by Maris-S
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...