Alles voor de beginnende webdesigner

Discussie in 'PC, Handheld & Algemeen' gestart door dutch_badass, 28 apr 2005.

Topicstatus:
Niet open voor verdere reacties.
  1. Darkwing

    Darkwing Active Member

    Berichten:
    6.510
    Leuk Bevonden:
    25
    Als je IE7 nog niet hebt geïnstalleerd, kun je een standalone versie van IE7 installeren die naast IE6 draait. Check deze link. Als je IE7 al hebt geïnstalleerd kun je via diezelfde link Multiple-IE downloaden, een installer voor standalone versies van IE vanaf versie 3. Ik heb het geprobeerd en het werkt op XP, al zijn de versies < 5 behoorlijk buggy en willen nog wel eens crashen.

    Daarnaast is het ook aan te raden om Mozilla en Safari te downloaden. Safari is de browser van Apple, maar sinds kort is er ook een (buggy) versie voor Windows beschikbaar. Traag en crasht om de haverklap, maar je kunt in ieder geval zien hoe je site er voor veel Mac-gebruikers uitziet.

    En dan nog een geweldige tip: http://browsershots.org/ Hiermee kun je screenshots genereren van je website vanuit heel veel browser / OS combinaties. Eigenlijk verplichte kost om je site hiermee te checken.
     
  2. Tsux

    Tsux Active Member

    Berichten:
    1.889
    Leuk Bevonden:
    0
    Ja! Irritant, ik snap er ook helemaal niks van...

    Die BrowserShots is genitaal! Als 't er vanuit 1 zo'n plaatje goed uitziet, vind ik 't gezegend :) Dank daarvoor!

    Gelukkig ben ik een mac gebruiker en kan ik voor de nieuwste versies Safari en Opera dingen de mac gebruiken :)

    Heb jij overigens enig idee hoe ik m'n achtergrond kan fixen? Want ik snap het niet... Naja... ik snap het wel, maar ik snap niet hoe ik het moet fixen...
     
  3. Darkwing

    Darkwing Active Member

    Berichten:
    6.510
    Leuk Bevonden:
    25
    Hmm, ik heb eens zitten kijken... het heeft sowieso met je #background div te maken. Die heeft nu een default breedte van 100%. Als je browservenster kleiner is dan de minimumbreedte van je pagina (dat heeft te maken met de positie van de #cirkels div), schaalt de #background div mee, dus de breedte van die div wordt de breedte van het venster.
    Je zou kunnen proberen de property min-width mee te geven aan de #background div, maar dat wordt helaas niet door IE ondersteund.
    Een andere optie zou zijn om de #cirkels div 'elastisch' te maken, dat wil zeggen dat je hem relatief positioneert ten opzichte van je browservenster. Ik heb het geprobeerd door de left property te veranderen in 50% en dat werkt. Je cirkels veranderen dan van positie naarmate de browser vergroot of verkleind wordt. Hiermee is het achtergrond-probleem opgelost, maar aan jou de keus of je het zo wilt oplossen.
     
  4. KevskiVD

    KevskiVD Active Member

    Berichten:
    949
    Leuk Bevonden:
    0
    Ah kijk dat van die BrowserShots is wel de moeite om een keer te bekijken. Super!
    Ik had er nog geen mogelijkheid voor gevonden om in oudere versies van IE te testen. Bedankt!

    Ik ben nu zelf ook weer met nieuwe website bezig (niet zo'n super spannend ontwerp, maar goed), komen binnenkort ook weer een paar vragen van mijn kant vandaan verwacht ik zo haha.
     
  5. Tsux

    Tsux Active Member

    Berichten:
    1.889
    Leuk Bevonden:
    0
    Hmm best stom, ik had het relatief plaatsen van de cirkels al bedacht, maar had zo gedacht, dat ik dat niet mooi zou vinden. Nu ik het echter aan de praat heb, vind ik het eigenlijk niet eens storend! Bedankt voor de suggestie!

    Hoe vind je de code er eigenlijk uitzien? Is de eerste keer dat ik zo met CSS en <div>-jes aan het knutselen ben :)
     
  6. KevskiVD

    KevskiVD Active Member

    Berichten:
    949
    Leuk Bevonden:
    0
    Ok het gezeur begint al...

    Ik ben met een website bezig (url verwijderd) is voor een kennis van mij.

    Het idee dat ik in mijn hoofd heb zitten:
    (url verwijderd)
    (ga ik waarschijnlijk nog wel het een en ander aan aanpassen).

    Het is niet zo'n heel bijzonder ontwerp, maar dit is ook helemaal niet nodig in mijn ogen.

    Het probleem zie je waarschijnlijk meteen al als je naar de website gaat:

    Ik wil dus de navigatie rechts van het logo hebben (nu gewoon nog even teksten, ipv afbeeldingen). Volgens mij heb ik het niet helemaal goed gedaan met de div's/css. Ik heb al het een en ander geprobeerd maar ik kom er niet echt uit.

    Maar de navigatie komt dus onder het logo te staan...
    Ik kom er niet uit hoe het ik die rechts moet krijgen.

    Als iemand mij verder zou willen helpen
     
    Laatst bewerkt: 23 mrt 2008
  7. Tsux

    Tsux Active Member

    Berichten:
    1.889
    Leuk Bevonden:
    0
    Ik kan je CSS niet bekijken, ik kan ff niet vinden waar die staat, maar goed.

    Het is sowieso het makkelijkst als je gewoon één <div>-je aanmaakt voor je header/navigatie/logo.

    Houd er rekening mee dat <div> ook wordt gezien als een paragraaf. Dus op het moment dat jij je </div> invoegt geldt dat ook meteen als een Enter en dus een regel lager.

    Je hebt nu ook zeg maar
    <div logo></div>
    <div navigatie><tabellen></div>


    Daar kan je gewoon 1 <div> van maken
    <div navigatie><img logo><link home><link info></div>
    Bovendien kan je dus ook de tabellen weglaten. Aangezien je met CSS je links kan positioneren.

    Maar goed, ik ben er nog niet zo'n kei in, ik vind het al heel wat dat ik m'n bovenstaande site aan de praat heb gekregen :)
    Maar ik denk dat ik wel een kloppend antwoord heb gegeven.
     
  8. KevskiVD

    KevskiVD Active Member

    Berichten:
    949
    Leuk Bevonden:
    0
    Ik zal er morgen weer even naar kijken, ik ben nu op school bezig met Actionscript helemaal super haha.
    Bedankt tot zover in ieder geval.

    Mijn index.php:
    HTML:
    <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <?php if ( $my->id ) { initEditor(); } ?>
    <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
    <?php mosShowHead(); ?>
    <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
    <title>Bizzy's Allround Decoshop</title>
    <style type="text/css">
    <!--
    @import url("css/template_css.css");
    -->
    </style>
    </head>
    <html>
    <div id="wrapper">
    <div id="header">
    <div id="logo"></div>
    <div id="navigation"><?php mosLoadModules ( 'user1' ); ?></div>
    </div>
    <div id="pathway"><?php mosPathWay(); ?></div>
    <div id="content"><?php mosMainBody(); ?></div>
    <div id="footer"><?php include_once('includes/footer.php'); ?></div>
    
    </div>
    </body>
    </html>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #wrapper {
    	width: 955px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	
    }
    
    #logo {
    	background-image: url(../images/Bizzys.gif);
    	height: 155px;
    	width: 280px;
    }
    
    #navigation {
    	width: 675px;
    	left: 280px;
    	top: 0px;
    	height: 155px;
    }
    #header {
    	height: 155px;
    	width: 955px;
    }
    
    
    #navigation a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	padding-left: 10px;
    }
    
    #pathway {
    	background-image: url(../images/content_top.gif);
    	height: 32px;
    	top: 280px;
    	padding-right: 50px;
    	padding-left: 50px;
    	padding-top: 10px;
    }
    #content {
    	top: 312px;
    	height: 650px;
    	background-image: url(../images/content_repeat.gif);
    	background-repeat: repeat-y;
    	padding-right: 50px;
    	padding-left: 50px;
    
    }
    #footer {
    	background-image: url(../images/footer.gif);
    	height: 54px;
    	top: 712px;
    	padding-right: 20px;
    	padding-left: 20px;
    }
    
    .contentpaneopen {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #404c66;
    }
    
    h3, .componentheading, .contentheading {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 140%;
    	color: #B9FFFF;
    	margin-left: 10px;
    }
    
    p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #404c66;
    }
    
    body {
    	background-color: #89A2D9;
    	margin: 0px;
    }
    
     
  9. Beumah

    Beumah ----

    Berichten:
    886
    Leuk Bevonden:
    0
    Is het moeilijk om zoiets in HTML te zetten? (als je geen ervaring ermee heb)

    En nee het is geen kunstwerk.

    [​IMG]
     
  10. KevskiVD

    KevskiVD Active Member

    Berichten:
    949
    Leuk Bevonden:
    0
    Ah dan is dat sowieso het probleem, dat div's als een paragraaf worden gezien. Was ik even helemaal vergeten.

    Ik heb verder nu geen tabellen aangemaakt trouwens ;)
    Ik ga zo even puzzelen
     
  11. sickness

    sickness i kill like a plague

    Berichten:
    968
    Leuk Bevonden:
    0
    zoals ik het zou doen: Nee, dat is niet zo moeilijk maar of dat technisch helemaal perfect is wil ik ook niet zeggen.

    hoe ik het zou doen is die afbeelding te slicen en te importeren in dreamweaver. als je dat hebt gedaan ben je al een flink eind. als je op dat stadium bent kan ik wel meer erover zeggen

    check mijn site www.chrisidema.nl dat is op dezelfde manier gedaan
     
  12. KevskiVD

    KevskiVD Active Member

    Berichten:
    949
    Leuk Bevonden:
    0
    Het is gelukt, gewoon padding gebruikt om de navigatie op zijn pelk te krijgen. Alles van de header in 1 div gezet. Ik dacht eigenlijk dat het logo dan ook op zou schuiven, maar dat is dus niet zo omdat dat gewoon een achtergrond afbeelding is.

    En Skullcrusher: Zoals Sickness zegt, je kunt de afbeelding simpel slicen en dan openen in Dreamweaver. Dan ben je inderdaad al een heel eind op weg. Moet lukken.

    Kijk anders even hier:
    How to design a website layout in Photoshop
     
  13. Beumah

    Beumah ----

    Berichten:
    886
    Leuk Bevonden:
    0
    Ik heb gister die Trial van Photoshop gedowd en ben nou dat Dreamwaver aan het downen. Ik gaat kijken of het gaat lukken.

    Thanks so far
     
  14. Beumah

    Beumah ----

    Berichten:
    886
    Leuk Bevonden:
    0
    OK, het deel in photoshop van de Tut is wel gelukt. Alleen dan bij Dreamwaver loop ik vast. Bij het eerste puntje moet je File>Site>New site. Nou heb ik de NL dreamwaver en kan ik dat al niet vinden.

    Edit: Nvermind |:-


    Edit 2: Moet nou een spacer invoegen in kolom 2 en kolom verklijnen naar 1 pxl. Nou staat er een link bij waar j eene spacer in kan voegen , maar dan kom ik gwon op een lege pagina. Ook krijg ik die kolom niet kleiner. Als ik em op 1 pxl zet blijft ie even groot?
     
    Laatst bewerkt: 20 feb 2008
  15. Cybermaxxx

    Cybermaxxx It just a game!

    Berichten:
    667
    Leuk Bevonden:
    0
    Guys,

    Wat is een goede site om HTML of een website bouwen te leren?
    Ben echt totaal noob in het bouwen van sites.
     
  16. Rivanov

    Rivanov Apple Fanboy

    Berichten:
    16.906
    Leuk Bevonden:
    559
  17. Tim

    Tim Active Member

    Berichten:
    7.744
    Leuk Bevonden:
    1.944
    Dan vindt hij de sites maar dan weet hij toch nog steeds niet wat een goede is :)
     
  18. Beumah

    Beumah ----

    Berichten:
    886
    Leuk Bevonden:
    0
    2e post op deze pagina. Ben ik nou ook aan het doen en het lukt al aardig. op een aantal puntje na O-). Heb je geen Photoshop gan naar site van adobe en daar kan je Trial van 30 dagen downen.
     
  19. Tsux

    Tsux Active Member

    Berichten:
    1.889
    Leuk Bevonden:
    0
    http://www.mijnhomepage.nl/htmlcursus/lessenoverzicht.php

    Dat is voor HTML, alleen tegenwoordig begint XHTML eigenlijk steeds meer op te rukken. Maar goed, je kan met de bovenstaande link beginnen. Voor al het naslag werk kun je bij deze website terecht:

    http://www.w3schools.com/

    En dat is echt het walhalla voor webdesigners, daar staat praktisch alles wat je nodig kunt hebben!
     
  20. Beumah

    Beumah ----

    Berichten:
    886
    Leuk Bevonden:
    0
    Heb nou dit gemaakt in Photoshop, maar het over zetten naar dreamwaver gaat niet zo soepel als met die Tutorial. Wat zou ik hier moet slicen bijv.
     
Topicstatus:
Niet open voor verdere reacties.

Deel Deze Pagina