[XHTML] block-elements naast elkaar - Softwareontwikkeling

donderdag 27 november 2003 11:57

Acties:

Topicstarter

voor de XHTML puristen:

wat is nou de mooiste manier om 2 elementen, die allebei een display: block hebben, NAAST elkaar te zetten, zonder ze absoluut te hoeven positioneren?

Uiteraard kan dit met een <table> , maarja een <table van 1 <tr> hoog is natuurlijk niet fraai.

Ik heb dit:

HTML:

1 2	<h1 id="collectiontitle" class="title">a collection</h1> <a id="editcollection" href="#" class="actionbutton">edit collection</a>

Cascading Stylesheet:

.title {
    height              :33px;
    font-size           :14px;
    font-weight         :bold;
    margin              : 0px;
    padding-top         : 8px;
    padding-left        : 30px;
    color               :#426B80;
}

#collectiontitle {
    background          :url("collection_g.gif") no-repeat 4px 4px;
}

.actionbutton {
    display: block;
    width: 145px;
    height:  23px;
...
}

.actionbutton:hover {
...
}

.actionbutton:active {
...
}

#editcollection {
    background-image: url("editcollection.gif");                
}

Nou wil ik de <h1> links uitgelijnd hebben en de <a> rechts, op dezelfde regel. Als ik de display op inline zet komen ze wel naast elkaar, maar dan word op Mozilla de boel niet netjes meer gerenderd (hoogte van element wordt dan logischerwijs genegeerd).

Is er dan iets beters dan er een <table> omheen te bakken?

donderdag 27 november 2003 12:02

Acties:

Bosmonster

*zucht*

float:left/right ?

[ Voor 178% gewijzigd door Bosmonster op 27-11-2003 12:06 ]

donderdag 27 november 2003 12:05

Acties:

paragon

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blaock</title>
<style type="text/css" media="screen">
body {
    margin:0px;
    padding:0px;
}

div {
    width:46px;
    height:46px;
    background-color:#369;
    padding:2px;
    margin:10px 10px 0px 0px;
    float:left;
}
</style>
</head>
<body>
<div>div 1</div>
<div>div 2</div>
</body>
</html>

donderdag 27 november 2003 12:05

Acties:

Genoil

Topicstarter

hmm float is weer iest nieuws, ga ik meteen naar kijken, thnx!
heb het net voor elkaar met 'n relative positioned divje eromheen en dan de <a> daarin absoluut gepositioneerd...

ah! float! wunderbar!

[ Voor 12% gewijzigd door Genoil op 27-11-2003 12:08 ]

donderdag 27 november 2003 12:42

Acties:

creative8500

freedom.

Een voorbeeld zie je in de remake, waar de kolommen die je ziet¹ ook met float werken.

_{1) In de één de headlines, in de ander o.a. het valid XHTML-plaatje}