[CSS] Werkt niet zoals verwacht

donderdag 11 mei 2006 11:47

Topicstarter

JHS schreef op donderdag 11 mei 2006 @ 11:34:
Wat is nu de (relevante) HTML en de CSS die je gebruikt, zou je dat desnoods online kunnen zetten ?

Goed plan. Ik heb alles even gestript en alleen hetgeen waar ik dus nu mee vast zit overgelaten.

code:

<html>
<link href="test.css" rel="stylesheet" type="text/css">
<body>
 <div id="banner">
    www.TimLogtenberg.nl
 </div>
 </body>
 </html>

en de css

code:

div#banner
{
    color: #fff;
    background-color: #000099;
    border-bottom: 1px solid #000;
}

en ze staan ook hier. Om te kijken of ze het ergens anders wel doen:
htm
css

Zo basic als het maar kan zijn dus. Ik weet dat ik nogal een warhoofd ben, maar nu klopt er toch echt ergens iets niet.

Hallo met Tim

Acties:

donderdag 11 mei 2006 11:47

Ziet er gewoon goed uit hoor, hier in Opera, IE en FireFox

.
Wat gaat er niet goed dan? Je banner krijgt netjes de kleuren die je in je stylesheet heb staan.

[ Voor 56% gewijzigd door user109731 op 11-05-2006 11:49 ]

Acties:

donderdag 11 mei 2006 11:51

Watch out Guys...

Ik proef een beetje in je verhaal dat je zelf pas bent begonnen met het verdiepen in de wondere wereld van CSS.

Belangrijkste les van CSS is het originele denken van old-fashion HTML design overboord gooien, eerst beginnen met semantisch je content opzetten en die opmaken met CSS.

Naast het feit dat het een omslag betekent voor je HTML denken (welk element heb ik nodig voor wat voor type content), moet je nu ook gaan nadenken hoe je bepaalde elementen gaat stylen. Simpelweg wat styles selecteren en gebruiken gaat je geheid problemen opleveren (en dan heb ik het nog niet eens over de browser-verschillen

). Probeer van elke style property te leren (allemaal hoeft niet, begin met de door jou meestgebruikte) wat precies de bedoeling is van het gebruik, ipv
te onthouden wat het resultaat is. Punt is nl., en daarvoor had ik even een lange inleiding nodig

, dat jij de losse attributen vast wel kent en weet wat het render-resultaat is, maar door ze te combineren je allerlei onvoorziene problemen krijgt die je niet kan oplossen.

Iedereen heeft al meegemaakt dat je door een "niets toevoegende item" toevoegt een geheel ander resultaat krijgt dan verwacht

Nu naar je reallife probleem: het lijkt me verstandig om de tutorial te volgen in kladblok of het code gedeelte van Dreamweaver. Probeer het niet via het design-scherm te doen, omdat DW toch op een iets andere manier HTML + CSS probeert te genereren. Elke versie wordt steeds beter, maar het is nog steeds niet perfect (wat overigens ook niet kan, aangezien een applicatie heeeeel moeilijk semantiek kan bepalen van een lap tekst)

Timlog schreef op donderdag 11 mei 2006 @ 11:46:
[...]

Goed plan. Ik heb alles even gestript en alleen hetgeen waar ik dus nu mee vast zit overgelaten.
HTML:
1
2
3
4
5
6
7
8
<html>
<link href="test.css" rel="stylesheet" type="text/css">
<body>
 <div id="banner">
    www.TimLogtenberg.nl
 </div>
 </body>
 </html>
en de css
Cascading Stylesheet:
1
2
3
4
5
6
div#banner
{
    color: #fff;
    background-color: #000099;
    border-bottom: 1px solid #000;
}
en ze staan ook hier. Om te kijken of ze het ergens anders wel doen:
htm
css

Zo basic als het maar kan zijn dus. Ik weet dat ik nogal een warhoofd ben, maar nu klopt er toch echt ergens iets niet.

Ten eerste kan je ook een language (voor de highlighter) aan [code=html][/] or [code=css][/] toevoegen

En in zowel FF als IE ziet het er hetzelfde uit (behalve de standaard padding en margin van je body)

[ Voor 25% gewijzigd door BtM909 op 11-05-2006 11:51 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

donderdag 11 mei 2006 11:55

Topicstarter

Als ik het online bekijk werkt het wel. Dat kan helemaal niet. Ik draai niet op een server. Wel mee begonnen (gewoon phpdev), maar om het zo kaal mogelijk te houden toch maar even uitgezet.
Ik heb de bestanden op de computer staan. Als ik ze nu bekijk doet de css het niet. Als ik het online bekijk doet de css het wel. Dreamweaver laat ook zien dat de css werkt.
@verhaal hierboven.
Dat ben ik ook allemaal aan het doen. Ik probeer gestructureerd, en beheerst langzaam stap voor stap alles te doen. Ik doe dus tutorials en w3schools heb ik ook gelezen. Punt is dat ik dit een jaartje geleden ook al geprobeert heb, en toen heb ik het gewoon opgegeven. Ik dacht er weer eens tegenaan te gaan met wat frisse moed, want mij portfolio heeft gewoon een behoorlijke opfrisser nodig. Maar nu ligt het probleem denk ik echt ergens anders dan bij mij. Tenzij anders aangetoond word.
Ik ben niet volledig onbekend met css. Ik heb sowiso wel aardig feeling voor dit soort dingen, gezien ik ook in php, java, en c# al dingen heb geschreven (wie ook werkten

).

[ Voor 49% gewijzigd door Pkunk op 11-05-2006 11:56 ]

Hallo met Tim

Acties:

donderdag 11 mei 2006 11:56

Watch out Guys...

Wat voor OS gebruik je en je weet zeker dat de CSS in dezelfde directory als je HTML staat?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

donderdag 11 mei 2006 11:57

Het werkt hier lokaal wel gewoon, dus het ligt niet aan je code iig. Je heb test.htm en test.css gewoon in dezelfde map staan?

Wat zie je dan wel in Firefox/IE? Zie je wel de tekst?

Acties:

donderdag 11 mei 2006 12:00

Topicstarter

BtM909 schreef op donderdag 11 mei 2006 @ 11:55:
Wat voor OS gebruik je en je weet zeker dat de CSS in dezelfde directory als je HTML staat?

Het zijn idd stomme dingen die je zomaar over het hoofd zou zien. Maar ja, het staat in dezelfde directory. En waarom zou dreamweaver het wel goed laten zien?

Grote prutser schreef op donderdag 11 mei 2006 @ 11:56:
Het werkt hier lokaal wel gewoon, dus het ligt niet aan je code iig. Je heb test.htm en test.css gewoon in dezelfde map staan?

Wat zie je dan wel in Firefox/IE? Zie je wel de tekst?

Ik zie gewoon zolas het zou moeten. Dus de tekst in het blauw

[ Voor 34% gewijzigd door Pkunk op 11-05-2006 11:58 ]

Hallo met Tim

Acties:

donderdag 11 mei 2006 12:07

Ik bedoel: wat is het verschil tussen lokaal openen en vanaf de webserver (wat wel goed werkte).

Wat zie je als je het lokaal opent? Zie je bijv. wel de zwarte rand onderaan je banner?

Acties:

donderdag 11 mei 2006 12:10

Topicstarter

Grote prutser schreef op donderdag 11 mei 2006 @ 12:00:
Ik bedoel: wat is het verschil tussen lokaal openen en vanaf de webserver (wat wel goed werkte).

Wat zie je als je het lokaal opent? Zie je bijv. wel de zwarte rand onderaan je banner?

Lokaal zie ik gewoon de css niet. Dus alleen onopgemaakte tekst. Dus ook geen zwarte rand.
Overigens is dat wel aalleen het voorbeeld wat ik hier post. Als ik de volledige tutorial uit de TS doorloop, werkt het prima totdat ik dus bij die banner kom.

[ Voor 17% gewijzigd door Pkunk op 11-05-2006 12:09 ]

Hallo met Tim

Acties:

donderdag 11 mei 2006 12:18

Watch out Guys...

Nogmaals in welke browser bekijk je het?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

donderdag 11 mei 2006 12:56

Topicstarter

Online gebruik ik standaard Firefox. Als ik aan het ontwerpen ben gebruikt ik FFen IE. Ik ben al in about:config aan het neuzen of daar misschien iest vreemds staat. In IE zou ik nieteens weten waar ik zou moeten zoeken buiten de menus

[ Voor 47% gewijzigd door Pkunk op 11-05-2006 12:19 ]

Hallo met Tim

Acties:

donderdag 11 mei 2006 20:35

Je stylesheet word lokaal dus niet geladen door IE/firefox, maar wel door Dreamweaver.

Cascading Stylesheet:

1	body { background-color: lime; }

Zet dit eens in je CSS erbij?
Of probeer dit eens:

HTML:

<html>
<body>
<style type="text/css">
div#banner {
    color: #fff;
    background-color: #000099;
    border-bottom: 1px solid #000;
}
</style>
 <div id="banner">
    www.TimLogtenberg.nl
 </div>
 </body>
 </html>

Als het eerste werkt word je stylesheet wel geladen, maar niet (goed) toegepast op de div. (door een brakke bannerblocker ofzo?

).
Als het eerste niet werkt, maar de tweede wel, dan word je stylesheet niet goed geladen.
Als beiden niet werken is er wat mis met je browser

.

[ Voor 46% gewijzigd door user109731 op 11-05-2006 12:58 ]

Acties:

donderdag 11 mei 2006 22:43

Topicstarter

Hmm... ik heb Firefox opnieuw geinstalleerd maar. En vreemd genoeg werkt het nu goed. Ook in IE. Computer zal wel behekst zijn.
//edit: en nu weer niet. Zucht..

[ Voor 14% gewijzigd door Pkunk op 11-05-2006 20:47 ]

Hallo met Tim

Acties:

donderdag 25 mei 2006 14:15

Watch out Guys...

Waarschijnlijk dikke kans dat je een caching achtig probleem had

Ik ga je topic verplaatsen naar Client Software Algemeen, aangezien het geen design probleem was / is.

Ben iig blij dat je probleem is opgelost

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Acties:

donderdag 25 mei 2006 15:54

Topicstarter

Even een schopje. Ik ben er achter wat nou die gekke layout in FF veroorzaakte. Het gebeurt als ik de content div een overflow wil meegeven.

Of ik dit nu doe dmv auto of scroll maakt niet uit. Hij maakt er gewoon een zootje van. Ik heb het even online gezet om er zeker van te zijn dat het niet aan mijn pc/software ligt:
http://www.timlogtenberg.nl/tmp/main.php?pagina=wallies

Het blijkt overigens een bekende bug te zijn zie ik nu op google. Ik kan zelf niets vinden om het te verhelpen.

Voor de zekerheid ook nog maar even mijn hele lap code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.TimLogtenberg.nl</title>
<?php
$style = $_GET['style'];

switch($style)
{
    case ('personal'): echo '<link href="personal.css" rel="stylesheet" type="text/css">';
    break;
    case ('none'):;
    break;
    default: echo '<link href="tim.css" rel="stylesheet" type="text/css">';
}
?>
<body>
<div id="main">
    <div id="header"><p>Blabla</p></div>
    <div id="container">
        <div id="navcontainer">
            <ul class="navlist">
                  <li><a href="main.php?pagina=wie">Wie</a></li>
                  <li><a href="main.php?pagina=wat">Wat</a></li>
                  <li id="active"><a href="main.php?pagina=art">Art</a>
                        <ul id="subnavlist">
                            <li><a href="main.php?pagina=wallies">Wallpapers</a></li>
                            <li><a href="#">Spelletjes</a></li>
                            <li><a href="main.php?pagina=frutsels">misc</a></li>
                        </ul>
                  </li>
            </ul>
        </div>
        <div id="rightmenu">
            <ul class="navlist">
                <li><a href=#>Persoonlijk</a></li>
                <li><a href=#>Standaard</a></li>
                <li><a href=#>Geen</a></li>
            </ul>
        </div>
        <div id="content">
                    <?
                    $pagina = $_GET['pagina']; //de naam van de pagina ophalen

                    //de goede pagina ervoor halen
                    switch($pagina)
                    {
                    //stel het is wie, dan voegen we de pagina wie.html toe
                    case 'wie': include('wie.html');
                    break;
                    case 'wat': include('wat.html');
                    break;
                    case 'art': include('art.html');
                    break;
                    case 'wallies': include ('wallies.html');
                    break;
                    case 'frutsels': include ('frutsels.html');
                    break;
                    //als er niets is opgegeven gebruik je de hoofdpagina
                    default:
                    include('main.html');
                    }
                    ?>
            </div>
    </div>
    <div id="footer">
    Blabla</div>
</div>
</body>
</html>

Cascading Stylesheet:

/* CSS Document */
div#main
{
    margin: auto;
    width: 800px;
    border: 1px solid #333333;
}

div#header
{
    border: 1px solid #333333;
    height: 150px;
}

div#container
{
}

div#footer
{
    border: 1px solid #333333;
}

div#navcontainer
{
    border: 1px solid #333333;
    float: left;
    width: 150px;
    margin: 0px;
    padding: 0px;
}

div#rightmenu
{
    border: 1px solid #333333;
    float: right;
    width: 150px;
}

div#content
{
    border: 1px solid #990000;
    margin-left: 150px;
    margin-right: 150px;
        max-height: 500px;
        overflow: auto;

}

#active:hover li { display: block; }
#active li { display: none; }

.navlist
{
     list-style-type: none;
     margin: 0px;
     padding: 0px;
}

Hallo met Tim

Acties:

crisp

Devver

Pixelated

Dit probleem is laatst ook in Webdesign, Markup & Clientside Scripting naar voren gekomen: [rml][ css]FF/IE layout probleem[/rml]

Intentionally left blank

donderdag 25 mei 2006 17:02

Acties: