Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS style sheet

Gooly
6 antwoorden
  • Bovenaan mijn website heb ik een paar woorden staan die straks de links worden naar de pagina's waar hij naar toe verwijst, o.a. contact en het Huisje. Het is mij inmiddels al gelukt om met een css style de 2 woorden contact en het Huisje verder uit elkaar te zetten dan 1 spatie.
    Maar bij het huisje[/color:feb5d40e3e] wil ik dat niet omdat dat bij elkaar hoort. Hoe kan ik dat instellen in een css style?

    [code:1:feb5d40e3e]@charset "utf-8";
    /* CSS Document */

    #header {
    height: 167px;
    width: 945px;
    }

    #header2 {
    background-image: url(images/bovenkant.jpg);
    height: 35px;
    width: 945px;
    }
    #midden {
    background-image: url(images/Image14.jpg);
    height: 475px;
    width: 945px;
    }

    #bovenkanttekst {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
    color: #0096a7;
    word-spacing: 1cm;
    letter-spacing: normal;
    text-align: center;
    }

    #middentekst {
    font-family: Verdana, Geneva, sans-serif;
    color: #0096a7;
    background-position: left;
    width: 610px;
    position: relative;
    top: 2cm;
    right: -8cm;
    font-size: 15px;
    font-weight: normal;
    }

    #bovenkanttekst {
    position: absolute;
    font-size: 20px;
    width: 938px;
    top: 213px;
    height: 48px;
    left: 476px;
    white-space: normal;
    }
    #onderkant {
    background-color: #d0dc00;
    height: 40px;
    width: 945px;
    }
    #tekstonderkant {
    position: fixed;
    }
    .tekstonderkant {
    position: absolute;
    left: 547px;
    top: 706px;
    color: #FFF;
    font-size: 15px;
    font-family: Verdana, Geneva, sans-serif;
    }
    body {
    margin-left: 475px;
    margin-top: 20px;
    }
    #apDiv1 {
    position:absolute;
    width:107px;
    height:336px;
    z-index:1;
    left: 536px;
    top: 318px;
    }
    #midden #middentekst p strong {
    font-weight: normal;
    }
    #midden #middentekst p strong {
    font-weight: bold;
    }
    #midden #middentekst p strong {
    font-weight: normal;
    [/code:1:feb5d40e3e]
  • Je moet de tekst die je wilt onderlijnen in een <span></span> zetten en dan kan je deze apart stylen.

    Groetjes,

    Mike
  • Zonder HTML code erbij vind ik dat moeilijk te zeggen omdat ik nu de context van de stijlen niet kan zien. Maar ik zie dat je nogal wat absoluut aan het positioneren bent. Ik heb dat zelf slechts zelden nodig. Als je nog niet erg ervaren bent met CSS levert het ook vaak onverwachtte / onvoorspelbare resultaten op. Meestal krijg je zoiets ook wel met margins voor elkaar.

    Maar als je de HTMl erbij post, of een link naar de website zelf hebt waar ik het kan zien, kan ik je misschien wat tips geven.
  • de link is www.binnestebuuten.nl dan kan misschien beter zien wat ik bedoel. De webpagina zit er wel goed uit en kom geen rare dingen daarin tegen. Deze is inderdaad de eerste die ik met een css style sheet maak, daarvoor alleen met html.
  • het was even zoeken, want de URL klopt niet. Die is: http://www.binnenstebuuten.nl/

    Je hebt de menubalk momenteel in een <P>aragraaf bij elkaar staan.:
    [code:1:6a4d472950]
    <p>Home Locatie HetHuisje Omgeving Balancetherapie Prijzen <span class="koptekst"> Contact</span></p>
    [/code:1:6a4d472950]

    Dan kun je wel wat doen met de ruimte tussen de woorden en letters, maar dat geldt dan voor alle woorden en alle letters. Je kunt ze dus niet afzonderlijk benaderen.

    Wat sowieso veel beter in een menubalk is, en waarmee ook je probleem aangepakt kan worden, is je items in een unordered list zetten (<ul>) en die vervolgens in je stylesheet zo stylen dat deze als horizontale balk wordt weergegeven. Dan heb je ook meteen alle items in een eigen tag staan waarmee je ze wel afzonderlijk kunt 'benaderen'

    In de HTML komt het er dan zo uit te zien:
    [code:1:6a4d472950]
    <ul class="menubar">
    <li><a href="pagina1.html">Home</a></li>
    <li><a href="pagina2.html">Locatie</a></li>
    <li><a href="pagina3.html">Het Huisje</a></li>
    <li><a href="pagina4.html">Omgeving</a></li>
    <li><a href="pagina5.html">Balancetherapie</a></li>
    <li><a href="pagina6.html">Prijzen</a></li>
    <li><a href="pagina7.html">Contact</a></li>
    </ul>
    [/code:1:6a4d472950]

    En aan je stylesheet voeg je dan toe:

    [code:1:6a4d472950]
    ul.menubar {
    list-style-type: none;
    }

    ul.menubar li {
    display: block;
    float: left;
    margin-right: 25px;
    }

    ul.menubar a {
    text-decoration: none;
    color: #0096A7;
    }

    ul.menubar a:hover {
    color: #FF0000;
    }
    [/code:1:6a4d472950]

    Dus je begint met een 'gewone' unordered HTML list.

    In je style zeg je bij…
    ul.menubar -> Dat je geen punten voor de items wilt
    ul.menubar li -> Dat de items als blokken beschouwd dienen te worden, dat ze links tegen elkaar aan moeten liggen en dat ze 25 pixels uit elkaar moeten liggen
    ul.menubar a -> Dat je geen streepjes onder je links wilt en dat ze de kleur #0096A7 moeten hebben
    ul.menubar a:hover -> Dat de links bij een mouse-over de kleur #FF0000 moeten krijgen.

    Je kunt in bovenstaande code dus zelf experimenteren met de kleuren van de links (#0096A7 en #FF0000) en met de ruimte/marge tussen de links (margin-right: 25px;)

    Dan nog een opmerking over die positionering: Waar ik 'bang' voor was is inderdaad het geval: Ik moet helemaal naar rechts scrollen om de websitte te kunnen zien. Op mijn 24" scherm en helemaal gemaximaliseerd staat hij midden op mijn scherm.

    Beter is om de hele boel in een alles overkoepelend frame te gooien en die in je stylesheet te centreren.

    Dan gaat je hele site dus in een div:
    [code:1:6a4d472950]
    <html>
    <…
    <body>
    <div id="wrapper">
    Bla bla bla, de hele website staat hier etc.
    </div><!– wrapper –>
    </body>
    </html>
    [/code:1:6a4d472950]
    en in je stylesheet zet je dan:
    [code:1:6a4d472950]
    #wrapper {
    width: 945px;
    margin: 0px auto;
    }
    [/code:1:6a4d472950]
    Maar ik verwacht niet dat het goed gaat komen als je dat nu aan de huidige code gaat toevoegen. Die positioneringen wegen waarschijnlijk zwaarder. Ik heb nog even in je code zitten kijken maar ik kom er zo gauw niet uit.

    Persoonlijk zou ik opnieuw beginnen in de volgende structuur:

    Wrapper

    Header
    /Header

    Navigatiebalk
    /Navigatiebalk

    Sidebar
    /Sidebar

    Rechterkolom
    /Rechterkolom

    Footer
    /footer

    /Wrapper

    De wrapper definieer je als hierboven. Dan heb je de breedte en het centreren van de website al geregeld

    Header hoef je qua positie niks aan te doen. Wel een hoogte geven(en qua kleur, font etc natuurlijk)
    Voor navigatie geldt hetzelfde (daar komt die menubalk dus in)
    Sidebar geef je een breedte, en float: left
    Rechterkolom idem dito
    (Zorg ervoor dat Border linkerkolom + marge linkerkolom + breedte linkerkolom + padding linkerkolom + Border rechterkolom + marge rechterkolom + breedte rechterkolom + padding rechterkolom gelijk zijn aan de breedte die je bij #wrapper hebt opgegeven)
    De footer geef je een clear:both; in de stylesheet, zodat die niet ook wil gaan floaten.
  • Erg bedankt voor je goede reactie, het is de eerste keer dat ik het op deze manier maak dus voor mij is het ook allemaal nieuw. Als de website maar goed draait dan kan ik het altijd nog opnieuw opbouwen mocht dat ooit nodig zijn.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.