CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

fixxxer Nybegynder

13. november 2005 - 15:04 Der er 14 kommentarer og
3 løsninger

divs og vertical align

Jeg er ved at blive skør.. Jeg forsøger at sætte 3 divs på linje med float: left og har prøvet at bruge height, line-height mfl. for at få dem alle til at være på linje med hinanden, således at deres indhold står pænt på linje.

Herunder et eksempel:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link href="/css/treeview.css" type="text/css" rel="stylesheet" />
<title>treeview test</title>
</head>

<body>
<div class="item_btn"><img width="9" height="9" src="/images/treeview_expand_btn.gif" alt="" /></div>
<div class="item_icon"><img width="16" height="16" src="/images/treeview_folder_closed.gif" alt="" /></div>
<div class="item_text"><a href="#">My Documents</a></div>
</body>

</html>

Og mit css sheet:

.item_btn { float: left; }
.item_icon { text-align: center; width: 20px; float: left; margin-top: auto; margin-bottom: auto; }
.item_text { font-size: 11px; font-family: Helvetica, Geneva, Arial; float: left; margin-top: auto; margin-bottom: auto; }

Samtidigt er resultatet meget forskelligt i IE og FF!

Hvad gør jeg galt?

Synes godt om

olebole Juniormester

13. november 2005 - 15:18 #1

<ole>

Din XML-prolog:
<?xml version="1.0" encoding="iso-8859-1"?>

- disabler nogle af de vigtigste områder af CSS i IE :o|

Undlader du den, har det ikke længere noget med XHTML at gøre - da XHTML jo som bekendt er et subset af XML. IE 6 understøtter ikke XHTML - og heller ikke IE7 kommer til det. Prøv at læse:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Der er sikkert meget om XHTML, der ikke er nogen, der har fortalt dig ... ellers ville du nok ikke bruge det ;o)

Nu er det ikke til at vide, hva det er, du gerne vil kunne lave - og så er det jo svært at rådgive. Prøv at forklare noget mere. Skal der f.eks. være andet end de tre div på siden - og i så fald, hvad og hvordan? :)

/mvh
</bole>

Synes godt om

fixxxer Nybegynder

13. november 2005 - 15:33 #2

Jeg sad netop og gen-læste dine artikler om XML og XHTML :)

De 3 divs kommer til at bo inde i et andet div der udgør et samlet layout.
Jeg kunne jo blot bruge en table, smide nogle td's på med width, men det er jo hammerende ulovligt iflg. xhtml-strict, så derfor prøver jeg mig med divs i stedet (for det har jeg hørt at man skal bruge !-)

Her er et skitche på mit layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<title>titel</title>
</head>

<body>
<div id="page">
<div id="top">
</div>
<div id="left">
<div class="item_btn"><img width="9" height="9" src="/images/treeview_expand_btn.gif" alt="" /></div>
<div class="item_icon"><img width="16" height="16" src="/images/treeview_folder_closed.gif" alt="" /></div>
<div class="item_text"><a href="#">My Documents</a></div>
</div>
<div id="main">
<br />
</div>
<div id="bottom">
<p>Copyright © 2005 - <a href="#">License agreement</a></p>
</div>
</div>
</body>

</html>

#/css/deafault.css
@charset "iso-8859-1";
@import url(/css/site.css);
@import url(/css/treeview.css);

#/css/site.css
body { text-align: center; margin: 20px 0 0; }
#page { text-align: left; width: 640px; margin: 0 auto; }
#top { background-color: #ffa300; background-image: url(/images/top_banner.gif); background-repeat: no-repeat; width: 100% ; height: 60px; }
#top_logon { float: right; margin-top: 7px; }
#left { width: 20%; float: left; }
#main { width: 80%; float: left; }
#bottom { text-align: center; }
p { color: #4e4e4e; font-size: 11px; font-family: Helvetica, Geneva, Arial; margin: 2px; }
a:link { color: #4e4e4e; text-decoration: none; }
a:visited { color: #4e4e4e; text-decoration: none; }
a:hover { color: #e68f0d; text-decoration: none; }
input { color: #4e4e4e; font-size: 11px; font-family: Helvetica, Geneva, Arial; background-color: #fff1d9; margin: 2px; border: solid 1px; }

#/css/treeview.css
.item_btn { float: left;}
.item_icon { float: left;}
.item_text { font-size: 11px; font-family: Helvetica, Geneva, Arial; float: left;}

Synes godt om

stich Nybegynder

13. november 2005 - 16:15 #3

Du kan trygt fjerne XML-prologen, den er ikke påkrævet, præcis som i et XML-dokument:
http://www.w3.org/TR/2000/REC-xml-20001006#sec-prolog-dtd

Det er ikke ulovligt at bruge table-elementer til den slags, men du bør bruge CSS i stedet.
Måske http://www.fu2k.org/alex/css/onetruelayout/example/interactive kan hjælpe dig. Du kan finde en meget grundig forklaring af det på http://positioniseverything.net/articles/onetruelayout/anyorder

Synes godt om

roenving Novice

13. november 2005 - 16:57 #4

'bruge CSS i stedet' for tabeller ?????

-- tabeller er html-elementer, mens css er styling-information, så det udsagn svarer til at sige, at du er holdt op med at tage cyklen eller bilen efter morgenbasser, og i stedet er gået over til at bruge en dåse autolak !-)

Synes godt om

stich Nybegynder

13. november 2005 - 17:08 #5

roenving:
"bruge table-elementer *til den slags*" - ikke table-elementer generelt. ;-)

Synes godt om

olebole Juniormester

13. november 2005 - 17:11 #6

Jeg undskylder. Prologen er ikke nødvendig, men 'kun' stærkt anbefalet.

Derudover har jeg langt overskredet min stich-kvote for november, så det glæder mig at se, roenving er inde i spørgsmålet. Det borger for sunde, pragmatiske råd, så jeg trækker mig her :)

Synes godt om

roenving Novice

13. november 2005 - 17:37 #7

>>stich

-- prøv lige at læse 13/11-2005 16:57:46 igen ...

-- html-elementer kan ikke på nogen måde erstattes af style-regler !-)

-- og et af de html-elementer, som kan styles med css er netop tabellen, som har nogle helt suveræne egenskaber, som du umuligt kan genskabe cross-browser uden en r**fuld javascript !o]

-- af dem er de to vigtigste, at man simpelt kan centrere vertikalt i tabelceller samt at en tabelrække vil have samme højde i alle celler, den største bagdel er, at tabelceller er skabt til at vise det indhold, der kommer i, hvilket betyder, at man kan blive nødt til at sætte fast definerede elementer indeni, hvis man vil undgå problemer med designet ...

-- og her ser det netop ud til, at en egenskab, der er brug for, er den vertikale centrering, da det automatisk vil sætte de tre elementer på linje !-)

Synes godt om

fixxxer Nybegynder

13. november 2005 - 17:42 #8

roenving >> Med andre ord, skal jeg skyde en hvis pind efter at bruge divs til det ovenstående formål, og bruge tables?

Synes godt om

roenving Novice

13. november 2005 - 17:50 #9

Du kan godt eksperimentere med f.eks. padding-top og få det til fungere rimeligt, men ved at bruge en tabelrække med 3 celler kan du centrere vertikalt automatisk og uproblematisk !-)

Synes godt om

stich Nybegynder

13. november 2005 - 18:09 #10

roenving, jeg mener godt html-elementer kan erstattes med CSS - i de tilfælde, hvor elementerne *kun* har et rent layoutmæssigt formål. Fx en stribe br-elementer efter hinanden; deres funktionalitet kunne klares med CSS, påført andre elementer. Er vi uenige om det?

Det er muligt fixxxer skal bruge en tabel her, umiddelbart ville jeg dog have troet det kunne klares med et enkelt div- eller p-element (fx), der indeholder begge billeder og linket. Og så påføre CSS-styles på dem, vertical-align og hvad nu.

Synes godt om

roenving Novice

13. november 2005 - 18:16 #11

vertical-align virker kun cross-browser på tabel-celler, hvilket iøvrigt også stemmer godt overens med w3cs filosofi !-)

-- at man i en del browsere kan benytte det på andre elemeneter eller sætte display:table-cell; er ikke så interessant, når alene den mest udbredte browser ikke er med !o]

-- og dit eksempel med tomme html-elementer gælder lige præcis kun tomme elementer ...

-- et hr-element kan også efterlignes ved at style et andet element (og det kan faktisk være hensigtsmæssigt !-), men normalt er det selvfølgelig mere hensigtsmæssigt 'bare' at bruge hr-elementet !-)

Synes godt om

stich Nybegynder

13. november 2005 - 18:43 #12

roenving:
Der er vi måske uenige så, jeg mener også de kan erstattes af CSS, i de tilfælde hvor de er en slags wrapper for andre HTML-elementer, og kun har et rent visuelt formål.

Lige netop vertical-align:middle, mener jeg faktisk IE ihf. har delvis support for!?

fixxxer:
Måske du kan bruge: http://phrogz.net/tmp/vertical-align/index.html til lidt hjælp?

Synes godt om

roenving Novice

14. november 2005 - 00:31 #13

-- men i det eksempel er forudsætningen for at lave en vertikal centrering jo så også, at du kender den præcise højde, og så kan man lige så godt ændre på f.eks. padding-top eller andre muligheder (f.eks. en margin-top på et p-element !-)

-- hvor svært kan det være: Du skal _altid_ benytte det html-element, som bedst og mest enkelt opfylder præcis det behov du har, en religiøs indgangsvinkel til at benytte det ene eller andet element kan højst bestyrke Al-Zarqawi i, at han har ret til at udslette uskyldige irakere og andre, der tilfældigvis kommer forbi ...

-- og der er intet galt i at bruge 57 id'er i et style-sheet til at bestemme det ene eller det andet for de forskellige elementer i et dokument, men det har vel ikke ret meget med c'et i css at gøre så (css = Cascading StyleSheet, altså at indkapslinger i elementer kan betyde forskelle i styling ?-)

Synes godt om

stich Nybegynder

14. november 2005 - 01:19 #14

Ja, med mindre problemet er, at billederne ikke er vertikalt justeret med teksten, i så fald kan han jo fint bruge "p.klasse img {vertical-align:middle;}" fx.

Jeg anser det mere for at være et spørgsmål om at følge anbefalede teknikker (der jo altså ikke er helt utestede), for at få det mest fleksible design, med en klar adskilning af HTML og design. At I kalder det religiøst kan jeg leve med, men ligefrem at sammenligne det med massemord (terror?), synes jeg dog ikke er fair...

Synes godt om

fixxxer Nybegynder

07. december 2005 - 19:58 #15

Kan jeg få alle til at skrive et svar?

Synes godt om

roenving Novice

08. december 2005 - 00:07 #16

Oki '-)

Synes godt om

roenving Novice

06. februar 2006 - 14:45 #17

-- og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS