[DIV] Leren & Vraag - Softwareontwikkeling

donderdag 26 oktober 2006 15:24

Acties:

Topicstarter

Hoi Tweakers,

ik ben met DIVjes aan het spelen na (te) lang met alleen tables te spelen. Nu kom ik ergens niet uit.

In mozilla ziet het er prima uit, maar IE7 niet. Bekijk de website waarmee ik loop te spelen hier: http://dev.onlyprojects.net/upload/.

Als mensen tips hebben over DIVs, graag. Ik heb allerlij websites over het onderwerp gevonden. Maar de meestte leggen dan alleen de theorie uit en de andere laten dan zeer uitgebreide voorbeelden zien waarmee je paar uur zoet bent om alleen de boel uit te zoeken.

Dus met alle links over DIVs ben ik happy. Maar natuurlijk ook, waarom doet mijn pagina gek in IE. De CSS file heb ik er niet bijgezet omdat die (bijna) niet gebruikt wordt.

*UPDATE*

Inmiddels heb ik dat gekke IE probleempje opgelost en stuit ik tegen het volgende probleem aan. In firefox wilt de text niet luisteren naar vertical-align: bottom; en nu in Internet Explorer doet hij het wel goed.

Het gaat om deze regel uit de code:

code:

1	<div style="position:absolute;left:0px;width:100%;height:20px;background-color:#000000;"><span style="color:orange;font-size:12px;vertical-align:bottom;">testing</span>

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Logic-Team</title>
  <link rel="stylesheet" type="text/css" href="logic.css">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div class="background"></div>

<div style="position:absolute;width:475px;height:470px;top:120px;left:180px;">
<div style="position:absolute;width:100%;height:30px;background-image:url(top.gif);">
<div style="position:absolute;width:100%;height:440px;left:0;top:30px;background-color:#172637;filter:alpha(opacity=80);-moz-opacity:0.8;">


<div style="position:absolute;width:455px;height:100px;top:10px;left:10px;">
<div style="position:absolute;left:0px;width:100%;height:20px;background-color:#000000;"><span style="color:orange;font-size:12px;vertical-align:bottom;">testing</span>
<div style="position:absolute;left:0px;top:20px;width:100%;height:100px;background-color:#050505;filter:alpha(opacity=50);-moz-opacity:0.5;">

</div>
</div>
</div>


</div>
</div>
</div>

</body>
</html>

[ Voor 15% gewijzigd door quakerix op 26-10-2006 15:45 ]

donderdag 26 oktober 2006 15:56

Acties:

Rowanov

Kop eens wat anders...

Ten eerste is een extern stylesheet, of tenminste een style declaratie in de head van je pagina beter. Dat houdt de boel overzichtelijk, want dit is echt een puinzooi. Daarnaast moet je niet vergeten dat er ook andere elementen bestaan naast divs. De absolute positioning is ook totaal onnodig; het is te zien dat je een tabel aan het nabouwen bent.

Om vertical-align te laten werken, moet je vaak een line-height instellen (soort van height, maar dan voor inline elementen).

Nuttig linkje van een website/tutorial gemaakt door een mede tweaker: http://modernmarkup.nl

[ Voor 9% gewijzigd door Rowanov op 26-10-2006 15:57 ]

donderdag 26 oktober 2006 16:51

Acties:

quakerix

Topicstarter

Rowanov schreef op donderdag 26 oktober 2006 @ 15:56:
Ten eerste is een extern stylesheet, of tenminste een style declaratie in de head van je pagina beter. Dat houdt de boel overzichtelijk, want dit is echt een puinzooi. Daarnaast moet je niet vergeten dat er ook andere elementen bestaan naast divs. De absolute positioning is ook totaal onnodig; het is te zien dat je een tabel aan het nabouwen bent.

Om vertical-align te laten werken, moet je vaak een line-height instellen (soort van height, maar dan voor inline elementen).

Nuttig linkje van een website/tutorial gemaakt door een mede tweaker: http://modernmarkup.nl

Ja ik had even tijdelijk in de file zelf aan het "spelen". Ik heb er een externe file van gemaakt.

Hieronder staat dan ook de nieuwe code. Ik had de website van de mede-tweaker al bekeken. Maar er is nogal veel under construction op zijn website. En ik zat wat dingen op te zoeken.. en dat staat er dan weer net niet op.

Want ik vroeg me bijvoorbeeld af, welk element je gebruikt om txt te plaatsen? ik heb nu span gebruikt. Maar is dat netjes?

btw. het probleem dat ik nu heb is dat line-height wel "beter" werkt in mozilla, maar er nog steeds een verschil tussen IE en FF is. Alsof het aantal pixels in beide browsers anders is. In Internet Explorer doet hij het prima. Maar in FF lijkt het net of die line-hieght niet helemaal klopt.

Check de website again http://dev.onlyprojects.net/upload/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Logic-Team</title>
  <link rel="stylesheet" type="text/css" href="logic.css">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div class="background"></div>

<div class="main_news">
    <div class="main_news_header"></div>
    <div class="main_news_back"></div>

    <div class="main_news_item">
        <div class="main_news_item_header"><span class="text-header">testing</span></div>
        <div class="main_news_item_back">
            <table style="height:100%; width:100%;" border="1"><tr><td>x</td></tr></table>
        </div>
    </div>
</div>

</body>
</html>

Cascading Stylesheet:

DIV.background {
    background-color: black;
    position: absolute;
    width: 1024px;
    height: 738px;
    padding : 0px 0px 0px 0px;
    top: 0px;
    left: 0px;
    background-image: url("bg.jpg");
    background-attachment : fixed;
    background-repeat : no-repeat;
}
DIV.main_news {
    position:absolute;
    width:475px;
    height:470px;
    top:120px;
    left:180px;
}
DIV.main_news_header {
    width:100%;
    height:30px;
    background-image:url(top.gif);
}
DIV.main_news_back {
    width:100%;
    height:440px;
    left:0;
    top:30px;
    background-color:#172637;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
}
DIV.main_news_item {
    position:absolute;
    width:455px;
    height:100px;
    top:40px;
    left:10px;
}
DIV.main_news_item_header {
    left:0px;
    top:0px;
    width:100%;
    height:20px;
    background-color:#000000;
}
DIV.main_news_item_back {
    left:0px;
    top:20px;
    width:100%;
    height:100%;
    background-color:#050505;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
}
.text-header {
    line-height:20px;
    color:orange;
    font-size:12px;
    vertical-align:bottom;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

donderdag 26 oktober 2006 17:26

Acties:

Boelie-Boelie

Om browserverschillen te verkleinen, kun je beter een volledig doctype gebruiken (achtergrondinfo).

Zoals je op Modern Markup ook vast hebt gelezen, zijn er diverse elementen voor een tekststructuur, dus weet je dat je meestal daar geen span voor behoort te gebruiken.

Cogito ergo dubito

donderdag 26 oktober 2006 17:37

Acties:

mithras

Wat dingen die mij opvallen:

Waarom een background div, als je die properties makkelijk aan een body mee kan geven?
Zelfde geldt voor de main_news_back, gewoon eruit slopen en meegeven aan de main_news
Waarom een span text-header binnen de div main_news_item_header?
Waarom een tabel van 100% * 100% in een div?
Waarom uberhaupt een tabel die (waarop het gaat lijken) geen tabulaire data gaat bevatten?
Probeer de blokelementen te positioneren met margin/paddings en floats. Dat ziet er imho mooier uit dan absolute positionering met top, left, bottem en right

/edit
Wat je nu namelijk hebt gedaan is vrij omslachtig en onduidelijk. Als je rechtoe rechtaan blokken ontwerpt met een duidelijke inhoud (dus niet een span in een div of een grote tabel in een div), is het voor jezelf en anderen beter te volgen. Mochten er fouten inzitten, weet je sneller waar je moet zoeken. Ook zal je met een structuur die ik je probeer duidelijk te maken beter toegankelijk zijn voor tekstuele browsers. Nu lijken die erg verouderd en denk je dat niemand ze meer gebruikt, maar dat is wel de manier om bijv je toegankelijkheid voor gehandicapten en misschien ook zoekrobots te vergroten

[ Voor 33% gewijzigd door mithras op 26-10-2006 17:41 ]

donderdag 26 oktober 2006 17:40

Acties:

user109731

En -moz-opacity kun je vervangen door opacity, zodat het ook in opera werkt.

En omdat je ook nog om links vroeg:

donderdag 26 oktober 2006 20:54

Acties:

Rowanov

Kop eens wat anders...

quakerix schreef op donderdag 26 oktober 2006 @ 16:51:
Hieronder staat dan ook de nieuwe code. Ik had de website van de mede-tweaker al bekeken. Maar er is nogal veel under construction op zijn website. En ik zat wat dingen op te zoeken.. en dat staat er dan weer net niet op.

Dat is onzin; het gedeelte wat jij hard nodig hebt is het gedeelte over hoe je een fatsoenlijke pagina opbouwt en dat staat er weer wel in. Enkel de reference is niet af en de rest van de site wel. Ik raad je sterk aan dit toch eens door te gaan lezen. Wat je nu produceert bestaat geheel uit divjes en spans, waarvan de helft overbodig. Daarnaast heb ik je al gewezen op de absolute positionering.

Ik ga je iig niet verder helpen totdat je jezelf een beetje inleest, want je gaat nooit browserverschillen elimineren als je niet eens fatsoenlijk een pagina kan opzetten. Div en span zijn niet de enige elementen!