Page 1 of 2 12 Last
  1. #1

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    html in html met css

    Hallo,

    Ik zit vast met mijn website, ik heb de header en de achtergrond al kunnen maken en positioneren en dergelijke met css. Maar nu wil ik een menu onder mijn header maar ik weet niet hoe ik dit moet aanpakken, ik heb een menubalk gemaakt met photoshop en gesliced en dergelijke en opgeslagen als html en images, maar het probleem is hoe kan ik dit laten zien onder mijn header?

    Is er een andere manier om dit op te lossen of doe ik het totaal verkeerd?

    Dank bij voorbaat
    jakke
    no votes  

  2. #2
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Toon alvast eens wat ge al hebt zodat we daar op verder kunnen bouwen of zeggen hoe het anders moet.
    no votes  

  3. #3

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    ok zal het ergens uploaden
    no votes  

  4. #4

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Untitled Document dit is wat ik al heb, trekt nergens op maar het is maar om alles onder de knie te krijgen, nu wil ik mijn menu onder de header en daar onder de content en dergelijke

    vooral het tekenen in photoshop en dergelijke wil ik onder de knie krijgen maar dat zal wel komen
    no votes  

  5. #5
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Om te beginnen kunt ge altijd best een omringende div gebruiken, een container. En van daaruit zijn het gewoon blokken die ge onder en naast elkaar legt.

    Code:
    <div id="container">
        <div id="header">
        
        </div>
        
        <ul id="nav">
        
        </ul>
        
        <div id="sidebar">
        
        </div>
        
        <div id="content">
        
        </div>
    </div>
    Het hoeft ook niet altijd een div te zijn. Uw header kan in sommige gevallen ook een h-element zijn en een menu bouwen we op uit een lijst (best practice en semantisch sterk).
    De sidebar is maar een voorbeeldje, kan dus ook perfect zonder.
    no votes  

  6. #6

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    ok heb het gekopieërd en geplakt en heb die sidebar verwijderd, mijn menu staat op Untitled-2 hoe kan ik er voor zorgen dat ik dit onder mijn header kan laten zien, woorden als link maken en dergelijke is geen probleem, ben nog bezig met een mouseover img te tekenen
    no votes  

  7. #7

    Registered
    19/06/11
    Location
    Hasselt
    Posts
    934
    iTrader
    -3 (0%)
    Mentioned
    0 Post(s)
    Reputation
    0/5
    no offence maar eh.... ge begint nog maar aan uw site bouwen en al zo veel vragen?

    ... misschien toch eens ergens een tutorial/boek gaan zoeken over webdesign (:?
    Nobody notices what I'm doing ... Until I stop doing it.
    Webhosting ? Klik hier
    no votes  

  8. #8

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    heb html en css voor dummies, webdesign voor dummies en php en mysql voor dummies, maar vindt er niets aan :o
    no votes  

  9. #9

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Voorbeeld:
    HTML Code:
        <div id="menuwrapper">
          <ul id="menulist">
    	    <li><a href="/index.php" title="Start" id="start"><span>De Notenbalkers</span></a></li>
    	    <li><a href="/wiezijnwij.php" title="Wie zijn wij" id="wiezijnwij"><span>Wie zijn wij</span></a></li>
            <li><a href="/nieuws.php" title="Nieuws" id="nieuws"><span>Nieuws</span></a></li>	
            <li><a href="/kalender.php" title="Kalender" id="kalender"><span>Kalender</span></a></li>	
            <li><a href="/showavond.php" title="Showavond" id="showavond"><span>Showavond</span></a></li>	
            <li><a href="/media.php" title="Media" id="media"><span>Media</span></a></li>
            <li><a href="/contact.php" title="Contacteer ons" id="contact"><span>Contact</span></a></li>	
          </ul>
        </div>
    CSS
    Code:
    #menuwrapper {
    	height: 65px;
    	background-image: url(/files/template/1280+/menubg.png);
    	background-repeat: repeat-x;
    }
    
    #menulist {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 804px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 0;
    	margin-bottom: 0;
    }
    
    #menulist li {
    	display: inline-block;
    	float: left;
    	width: auto;
    }
    
    #menulist li a {
    	display: inline-block;
    	float: left;
    	border: 0px none #FFF;
    }
    	
    #menulist a span {
    	position: absolute;
    	top: -10000px;
    }
    
    
    /*buttons*/
    /*start button*/
    #menulist #start {
    	width: 203px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    #menulist #start:hover {
    	background-position: left bottom;
    }
    
    /*wie zijn wij button*/
    #menulist #wiezijnwij {
    	width: 115px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -203px top;
    }
    
    #menulist #wiezijnwij:hover {
    	background-position: -203px bottom;
    }
    
    /*nieuws button*/
    #menulist #nieuws {
    	width: 86px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -318px top;
    }
    
    #menulist #nieuws:hover {
    	background-position: -318px bottom;
    }
    
    /*kalender button*/
    #menulist #kalender {
    	width: 105px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -404px top;
    }
    
    #menulist #kalender:hover {
    	background-position: -404px bottom;
    }
    
    
    /*showavond button*/
    #menulist #showavond {
    	width: 121px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -509px top;
    }
    
    #menulist #showavond:hover {
    	background-position: -509px bottom;
    }
    
    /*media button*/
    #menulist #media {
    	width: 76px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -630px top;
    }
    
    #menulist #media:hover {
    	background-position: -630px bottom;
    }
    
    /*contact button*/
    #menulist #contact {
    	width: 98px;
    	height: 65px;
    	display: block;
    	background-image: url(/files/template/1280+/menubalkfull.png);
    	background-repeat: no-repeat;
    	background-position: -706px top;
    }
    
    
    #menulist #contact:hover {
    	background-position: -706px bottom;
    }
    
    /*einde menulist*/
    Hier heb ik dus gewerkt met een sprite (een enkele afbeelding waarin heel het menu staat én de hoverstates). Met background-image werken ipv HTML-img is imo het beste en dan kan je gebruik maken van css sprites en verminder je aanzienlijk die load. (Google 'css sprite')

    EDIT: en de 'webslice' dat jij post is NIET juist. NIET met tables werken met daarin uw images dus!!!
    no votes  

  10. #10
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    <!-- Save for Web Slices (Untitled-2) -->
    Laat die web slice tools al maar achterwege om te beginne ..
    no votes  

  11. #11

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    ok hartelijk bedankt, zal het zo eens proberen
    no votes  

  12. #12
    DieselPower's Avatar
    Registered
    23/09/04
    Location
    2000
    Posts
    5,759
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    Reputation
    17/23
    code · How to Centre and Layout Pages Without a Wrapper
    mss interessant voer voor discussie.
    "Hookers and drunks instinctively understand that common sense is the enemy of romance." - Sebastian Horsley
    no votes  

  13. #13

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    heb een sprite gemaakt voor het menu, het is me all aardig gelukt moet ik zeggen, nu moet ik hem nog gecentreerd krijgen onder mijn header en dan kan ik aan de content beginnen.

    Hartelijk bedankt allemaal.

    PS: het resultaat dat ik al heb kan je vinden op Untitled Document
    no votes  

  14. #14

    Registered
    19/06/11
    Location
    Hasselt
    Posts
    934
    iTrader
    -3 (0%)
    Mentioned
    0 Post(s)
    Reputation
    0/5
    mag ik vragen waarom het php paginas zijn?

    Ik zou met de (zeer) beperkte kennis die jij hebt nog niet te veel met php te werken (zeker niet met user inputs) dat is om problemen vragen (:
    Nobody notices what I'm doing ... Until I stop doing it.
    Webhosting ? Klik hier
    no votes  

  15. #15

    Registered
    30/01/04
    Location
    laakdal
    Posts
    212
    iTrader
    1 (67%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    dat was omdat ik de include functie gebruikt heb om mijn menu te laten zien, maar he zou dus beter zijn om met sprites te werken, dus heb ik dat gedaan.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in