PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
e

vier elemeneten gelijk verdelen d.m.v. Div

Door em op 30-12-2008 12:40
2.993 views
Wie kan mij hiermee helpen?

Ik wil vier elementen gelijk verdelen over de volle breedte van een kolom

style

.container {
width: 800px;
}

.element {
float: left;
width: 108px;
}


in de body

<div class="container">

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

</div>

Je zou denken aan text-align: justify maar dat werkt niet.
De eerste staat tegen de linkerkant, de laatse tegen de rechterkant, de wituimte is dan overal gelijk

Alvast bedankt.
Crispijn -
31-12-2008 10:07
Het gaat om die vier kolommen aan het eind van je site neem ik aan
G
Gerben van Erkelens
31-12-2008 10:09
Ja inderdaad. De header die in dit geval eigenlijk als footer dient.
Moet er wel bij zeggen dat het theme eerst kubrick default was. De bestanden heb ik daarvan overgenomen en aangepast.
Crispijn -
31-12-2008 10:14
Tip voor de volgende keer: maak eerst een html layout die helemaal naar je zin is, ga 'm daarna opknippen in template files voor wordpress. Dit werkt vele malen handiger.

Ik zal even kijken voor je. Momentje

edit:
Je html is echt een puinhoop. Deze kan je veel netter op laten bouwen door wordpress. Je begint met en lijst waar je de h2 elementen al in zet. Dit is niet nodig hoor!

#footer {
	margin: 0px auto;
	width: 700px;
	padding-top: 20px;
	border: 1px #EF9F4A solid;
	}
	
.footer_col {
	float: left;
	width: 23.75%;
	margin-left: .75%;
	border: 1px #EF9F4A solid;
	}
.clear {
	clear: both;
	}
	
.footer_col ul {
	list-style-type: none;
	}




<div id="footer">
    <div id="footer-sidebar1" class="footer_col">
    	<h2>Linked data</h2>
        	<ul> 
				<li><a href="http://www.sxc.hu/profile/xaio" target="_top" title="SXC profile"><img src="/wp-content/themes/gve/images/sxc.jpg" border="0" /> SXC profile (Photography)</a></li> 
				<li><a href="http://www.slamfm.nl/page/dna/xaio" target="_top" title="Slam DNA"><img src="/wp-content/themes/gve/images/slm.jpg" border="0" /> Slam DNA (Music)</a></li> 
			</ul>
	</div> 
    <div id="footer-sidebar2" class="footer_col">
    	<h2 class="widgettitle">Recently added posts</h2>
        	<ul> 
				<li><a href="http://www.gerbenvanerkelens.com/portfolio-sxc-photo-used-across-the-ocean/">Portfolio: SXC Photo used across the ocean </a></li> 
				<li><a href="http://www.gerbenvanerkelens.com/tutorial-how-to-design-for-television/">Tutorial: How to design for television </a></li> 
				<li><a href="http://www.gerbenvanerkelens.com/tutorial-colors-and-their-meaning/">Tutorial: Colors and their meaning </a></li> 
				<li><a href="http://www.gerbenvanerkelens.com/audio-gve-the-chase/">Portfolio: audio GvE - The Chase </a></li> 
			</ul> 
    </div> 
    <div id="footer-sidebar3" class="footer_col">
		<h2 class="widgettitle">Categories</h2>	
			<ul>
				<li class="cat-item cat-item-5"><a href="http://www.gerbenvanerkelens.com/category/design-and-photography/" title="View all posts filed under Design and Photgraphy">Design and Photgraphy</a> </li> 
				<li class="cat-item cat-item-4"><a href="http://www.gerbenvanerkelens.com/category/opinions-and-ommunications/" title="View all posts filed under Opinions / Communications">Opinions / Communications</a> </li> 
				<li class="cat-item cat-item-3"><a href="http://www.gerbenvanerkelens.com/category/personal/" title="View all posts filed under Personal Data and Events">Personal Data and Events</a> </li> 
				<li class="cat-item cat-item-7"><a href="http://www.gerbenvanerkelens.com/category/portfolio-data/" title="View all posts filed under Portfolio Data">Portfolio Data</a> 
				</li> <li class="cat-item cat-item-79"><a href="http://www.gerbenvanerkelens.com/category/tuorial-data/" title="View all posts filed under Tutorial Data">Tutorial Data</a> </li> 
			</ul>   
	</div> 
    <div id="footer-sidebar4" class="footer_col"> 
		<h2 class="widgettitle">Archived Posts</h2>
        	<ul> 
				<li><a href='http://www.gerbenvanerkelens.com/2008/12/' title='December 2008'>December 2008</a></li> 
                <li><a href='http://www.gerbenvanerkelens.com/2008/11/' title='November 2008'>November 2008</a></li> 
                <li><a href='http://www.gerbenvanerkelens.com/2008/10/' title='October 2008'>October 2008</a></li> 
                <li><a href='http://www.gerbenvanerkelens.com/2008/09/' title='September 2008'>September 2008</a></li> 
                <li><a href='http://www.gerbenvanerkelens.com/2008/08/' title='August 2008'>August 2008</a></li> 
                <li><a href='http://www.gerbenvanerkelens.com/2008/07/' title='July 2008'>July 2008</a></li> 
			</ul> 
    </div>   
	<div class="clear"></div>
</div>


Zoals je ziet heb ik je html wat opgeschoond. Je ziet nu precies wat je nodig hebt.
e
em
31-12-2008 10:33
Gerben

Je kunt ook van de vier elementen in de footer een sidebar div maken

als je

<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

in de sidebar zet dan kun je met de widgets werken

Je moet even bij andere templates kijken naar 'dynamic_sidebar' als je met meerdere sidebars werkt moet je er volgens mij een cijfer achter zetten
e
em
31-12-2008 10:37
Ik heb trouwens ergens gelezen dat juist IE zich aan de W3 regels houdt
en FF er met padding en margin wat anders van maakt. FF 3 zou zich weer aan de regels gaan houden.
Crispijn -
31-12-2008 10:40
Waar heb je gelezen dat ie zich aan de W3 regels houdt? Die bron wil ik wel eens even nalezen. Het klopt dat er een verschil zit in de margin en padding tussen ie en andere (naar mijn idee nog steeds wel W3c gevalideerde browsers). Het is altijd even pielen hoe je dit moet oplossen.

edit: ik zie net dat mijn oplossing in ie 6 nog een draak is. In ie7 gaat het mij mij wel goed. Hoe gaat dat bij jullie?

Later een update, nu tijd voor iets anders.
e
em
31-12-2008 10:41
Crispijn

Dit is de site

http://www.beyondcommunications.nl/links.php?dir=Onderzoek


De oorspronkelijke vraag was of de vier rubrieken met een gelijke tussenruimte verdeeld kunnen worden over de volle breedte.

Niet met verschillende marges (kan niet) maar d.m.v text-align: justify
display: block


Niek

Deze oplossing werkt niet omdat de vier rubrieken dezelfde class div hebben
Crispijn -
31-12-2008 10:45
Ja, dat geloof ik wel. Ik ben meer benieuwd naar de site waar je las dat ie zich wel aan de W3C standaard houdt...
e
em
31-12-2008 10:53
Geen idee,

ik worstel mij door honderd rss feeds
en bookmark zelden iets (daarom de startpagina script) hahahaha

Ik kwam het tegen op mijn zoektocht naar de padding margin verschillen
tussen IE en FF een lange tijd geleden

Reageren

Inloggen om te reageren