Alles voor de beginnende webdesigner

appie21 · 5 sep 2008

Excess-Denied zei: ↑

In de images map van je template kijken en zoeken naar header/banner whatever Die dan openen in Photoshop e.d. en dan aanpassen en opnieuw uploaden.
Klik om te vergroten...

kijk dat moet ik hebben

heeft iemand een mooie eenvoudige template voor mij ik vind die van fardo.nl een mooi voorbeeld!

echt gewoon een header en links alleen maar home contact links

heel simpel dus

Excess-Denied · 5 sep 2008

appie21 zei: ↑

kijk dat moet ik hebben

heeft iemand een mooie eenvoudige template voor mij ik vind die van fardo.nl een mooi voorbeeld!

echt gewoon een header en links alleen maar home contact links

heel simpel dus
Klik om te vergroten...

Neem hier een kijkje, ruime keuze aan templates die je dan naar eigen wens kan aanpassen.

Rivanov · 5 sep 2008

Iemand ervaring met de mootool ReMooz?

Nitram · 7 sep 2008

Ik zit een beetje met html te spelen en ik heb een probleem. Ik werk namelijk met frames. Maar als ik de frames verschillende kleuren geef blijft er een wit randje tussen de frames.
Ik heb frameborder al op 0 staan maar dat verhelpt het niet.
Iemand enig idee hoe ik dit probleem verhelp aangezien dit me keuze qua kleuren beperkt.

Zoals hier:

[2k] · 7 sep 2008

Krijgen de 3 frames samen 100% breedte mee?
Zet alle tags in html eens achter elkaar van je frameset in index.html, dus zonder tabs/spaties/enters. Bij images wil IE er nog wel eens wat marge ondergooien, wanneer je een spatie of enter toevoegd in de code na de img tag, wellicht ook bij frames.

Je weet neem ik aan dat het niet aan te raden is om frames te gebruiken?

Nitram · 7 sep 2008

Samen zijn ze 100% inderdaad. En ik had al gelezen dat frames niet werden aangeaden.
Maar ik wist niet precies hoe ik het voor elkaar kon krijgen zonder frames.

Zoiets was namelijk mijn bedoeling:

Ik ga nu weer opnieuw beginnen en dit keer het zonder frames te doen. En deze keer ga ik met CSS erbij proberen. Hopen dat het lukt!

bedankt voor je antwoord in ieder geval.

Rivanov · 7 sep 2008

http://www.sceneone.nl/

Dit is een goede site waar Div's worden uitgelegd.

sickness · 8 sep 2008

oke ben van die scene afgestapt, maar is er niet een beter manier van de thumbs te laten zien, het kan wel, maar is daarbij ook een beetje rommelig

www.chrisidema.nl

Nitram · 9 sep 2008

Ik zit weer wat te spelen met html en css. Nou is het me gelukt om een navigation bar te maken met behulp van een tutorial. Maar nou wil ik hem het liefst verticaal, alleen de tutorial ging over horizontaal dus is dit nog mogelijk? En anders wil ik graag de navigation bar centreren.

En ook me content div staat niet mooi in het midden van het beeld dus ook die wil ik gecentreerd hebben. Iemand wat tips hoe ik dat voor elkaar krijg?

Sorry voor de lelijke kleuren trouwens.

Dokter Gonzo · 10 sep 2008

Nitram zei: ↑

Ik zit weer wat te spelen met html en css. Nou is het me gelukt om een navigation bar te maken met behulp van een tutorial. Maar nou wil ik hem het liefst verticaal, alleen de tutorial ging over horizontaal dus is dit nog mogelijk? En anders wil ik graag de navigation bar centreren.

En ook me content div staat niet mooi in het midden van het beeld dus ook die wil ik gecentreerd hebben. Iemand wat tips hoe ik dat voor elkaar krijg?

Sorry voor de lelijke kleuren trouwens.
Klik om te vergroten...

Je content div kan je in het midden plaatsen door die div de volgende stijlregel mee te geven:
Code:
margin:0px auto;
Zo uit mn hoofd gezegd zou je voor de navigatie eens moeten kijken of er een
Code:
display:inline;
gedefinieerd staat.

Nitram · 10 sep 2008

Als ik dat margin op 0 px zet dan gaat me nav bar weg. Omdat me content div dan te ver omhoog gaat. display inline staat er inderdaad bij me nav bar. Maar als ik dat weghaal weet ik nog niet wat ik moet doen . Ik zal zo de code even plaatsen misschien dat het dan makkelijker helpen is.

Me html code:

<html>
<head>
<link rel="stylesheet" href="sitestyle2.css">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>

<title>MARTIN</title>
<style type="text/css">
body{
color: #000000;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:relative;
background-color: #006600;
padding:5px;
width: 770px;
margin: 200px auto;
}
</style>
</head>

<body>
<div class="header">
<IMG SRC="feyenoord.jpg" ALT="Foto van mij" WIDTH="148" HEIGHT="148">
</div>

<div class="content">
tekst
</div>
<div align="left"></div>
</body>
</html>

CSS:

.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:absolute;
background-color: #006600;
top: 200px;
left:100px;
right:100px;
padding:5px;
}
body{
color: #413f3f;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#006600;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#fff;
background:#727454;
}

Dokter Gonzo · 10 sep 2008

Nitram zei: ↑

Als ik dat margin op 0 px zet dan gaat me nav bar weg. Omdat me content div dan te ver omhoog gaat. display inline staat er inderdaad bij me nav bar. Maar als ik dat weghaal weet ik nog niet wat ik moet doen . Ik zal zo de code even plaatsen misschien dat het dan makkelijker helpen is.

Me html code:

<html>
<head>
<link rel="stylesheet" href="sitestyle2.css">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>

<title>MARTIN</title>
<style type="text/css">
body{
color: #000000;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:relative;
background-color: #006600;
padding:5px;
width: 770px;
margin: 200px auto;
}
</style>
</head>

<body>
<div class="header">
<IMG SRC="feyenoord.jpg" ALT="Foto van mij" WIDTH="148" HEIGHT="148">
</div>

<div class="content">
tekst
</div>
<div align="left"></div>
</body>
</html>

CSS:

.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:absolute;
background-color: #006600;
top: 200px;
left:100px;
right:100px;
padding:5px;
}
body{
color: #413f3f;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#006600;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#fff;
background:#727454;
}

Klik om te vergroten...

First things first. Alles wat tussen de <head> tags staat is bedoeld voor de browser en hierin hoort dus geen opmaak. De navigatie (<ul>) hoort dus in de body.

Ten tweede is het wat overzichtelijker om alle stijlregels in een apart css-bestand te zetten. Je hebt bijvoorbeeld de classes body en header twee keer gedefinieerd.

Ik heb je code even wat op geschoond, het ziet er nu redelijk uit in FF, hier kan je wel mee verder denk ik.
Code:
<html>
<head>
<link rel="stylesheet" rev=Stylesheet href="sitestyle2.css">

<title>MARTIN</title>

</head>

<body>


<div class="content">

<div class="header">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archive"><a href="#">Archive</a></li>
<li id="nav-lab"><a href="#">Lab</a></li>
<li id="nav-reviews"><a href="#">Reviews</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
<IMG SRC="feyenoord.jpg" ALT="Foto van mij" WIDTH="148" HEIGHT="148">
</div>
tekst
</div>
</body>
</html>
Code:
.header{
background-image:url("http://i33.tinypic.com/wbytjq.jpg");
position:absolute;
top: 0px;
right: 0px;
left: 0px;
height:150px;
}
.content{
position:relative;
background-color: #006600;
padding:5px;
width: 770px;
margin: 0px auto;
}
body{
color: #000000;
font-family:Verdana, Times, serif;
font-size: 12px;
background-color:#000000;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#006600;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#fff;
background:#727454;
}

Nitram · 10 sep 2008

Bedankt, het is nu echt precies zoals ik het voor ogen had. Nu moet ik alleen nog een beetje aan de kleuren werken en een mooie banner proberen te maken.
Zou je misschien kort willen uitleggen wat ik nou fout had gedaan en hoe het wel had gemoeten? Dan weet ik volgende keer hoe het wel moet. Als je geen tijd heb om het uit te leggen probeer ik de codes wel te vergelijken.

Daantjuhh14 · 13 sep 2008

Hier ben ik weer

Ik heb wederom een vraag, Mijn, website is een beetje breed/lang geworden nadat ik op een knop heb gedrukt, ik weet alleen niet meer welke

Kijk:http://xbox360gaming.nl/EhvJb1/

En de link trainingstijden wil maar niet wit worden, dat is de enige echte link nog zegmaar. Maar als ik de link weghaal, word ie weer dikgedrukt wit.

Gr Daan

Dokter Gonzo · 13 sep 2008

daanhockeyc1 zei: ↑

Hier ben ik weer

Ik heb wederom een vraag, Mijn, website is een beetje breed/lang geworden nadat ik op een knop heb gedrukt, ik weet alleen niet meer welke

Kijk:http://xbox360gaming.nl/EhvJb1/

En de link trainingstijden wil maar niet wit worden, dat is de enige echte link nog zegmaar. Maar als ik de link weghaal, word ie weer dikgedrukt wit.

Gr Daan
Klik om te vergroten...

De table die je gebruikt voor je paginaopmaak, een werkwijze die ik je overigens niet kan aanbevelen, heeft de width op 100% staan. Als je dit weghaalt zal de table even breed worden als de som van de width van alle cellen.

De link die niet wit wordt is het gevolg van een de stijlregel die je toepast voor de a-tag. Wanneer er daarwerkelijk een url in je link wordt gezet, kan je deze een stijl geven door in je css-bestand een regel op te nemen die lijkt op zoiets als dit
Code:
a.wittelinkstijl:link
{
    color:#FFFFFF;
}
:link zal dan alleen gelden voor a-tags die een url hebben in de href-parameter.

Gerjan · 13 sep 2008

Zo, het (nieuwe) begin is er

GerjanLonink.nl

Morgen weer verder .

Hybrid · 13 sep 2008

Dagje werk zie ik.

Gerjan · 13 sep 2008

Minstens! Had even zin op dat scherm te veranderen. Morgen misschien echt beginnen. Nu feestje.

Daantjuhh14 · 13 sep 2008

Dokter Gonzo zei: ↑
De table die je gebruikt voor je paginaopmaak, een werkwijze die ik je overigens niet kan aanbevelen, heeft de width op 100% staan. Als je dit weghaalt zal de table even breed worden als de som van de width van alle cellen.

De link die niet wit wordt is het gevolg van een de stijlregel die je toepast voor de a-tag. Wanneer er daarwerkelijk een url in je link wordt gezet, kan je deze een stijl geven door in je css-bestand een regel op te nemen die lijkt op zoiets als dit
Code:
a.wittelinkstijl:link
{
    color:#FFFFFF;
}
:link zal dan alleen gelden voor a-tags die een url hebben in de href-parameter.
Klik om te vergroten...
ok, maar hoezo is de werkwijze niet aantebevelen?, ik heb gewoon zon stadaard ding uit dreamweaver gebruikt. en waar staat de with?

Gr Daan,

EDIT: Nice Gerjan!

[2k] · 13 sep 2008

Het is maar net wat je met je links wilt bereiken qua styling en welke links je wilt beïnvloeden en wanneer.

@ Gerjan; Ziet er best leuk uit. Doet me aan PGR denken. Enig nadeel is dat ik een beetje gek wordt van die achtergrond (lijkt dan te gaan trillen/verschuiven/golven).

Ben zelf ook met een projectje bezig en heb een simpel ontwerp (ben er alleen nog niet helemaal tevreden over). Heb wel gemerkt dat IE af en toe echt raar reageerd op je CSS. Nou wist ik wel dat IE6, IE7 en FF anders met CSS omgingen, maar zelfs iets eenvoudigs zorgde voor vreemde resultaten in IE7. Nou is ie goed in IE7 en FF, maar moet ik hem nog even goedmaken voor IE6.

Aanmelden

Alles voor de beginnende webdesigner

appie21 Active Member

Excess-Denied ----------- XBW.nl VIP

Rivanov Apple Fanboy

Nitram BiA!

[2k] XBW.nl VIP XBW.nl VIP

Nitram BiA!

Rivanov Apple Fanboy

sickness i kill like a plague

Nitram BiA!

Dokter Gonzo Hunter S. Thompson

Nitram BiA!

Dokter Gonzo Hunter S. Thompson

Nitram BiA!

Daantjuhh14 Guest

Dokter Gonzo Hunter S. Thompson

Gerjan XBW.nl VIP XBW.nl VIP

Hybrid Well-Known Member

Gerjan XBW.nl VIP XBW.nl VIP

Daantjuhh14 Guest

[2k] XBW.nl VIP XBW.nl VIP

Deel Deze Pagina

Aanmelden

Nuttige Zoekopdrachten

Alles voor de beginnende webdesigner

appie21 Active Member

Excess-Denied ----------- XBW.nl VIP

Rivanov Apple Fanboy

Nitram BiA!

[2k] XBW.nl VIP XBW.nl VIP

Nitram BiA!

Rivanov Apple Fanboy

sickness i kill like a plague

Nitram BiA!

Dokter Gonzo Hunter S. Thompson

Nitram BiA!

Dokter Gonzo Hunter S. Thompson

Nitram BiA!

Daantjuhh14 Guest

Dokter Gonzo Hunter S. Thompson

Gerjan XBW.nl VIP XBW.nl VIP

Hybrid Well-Known Member

Gerjan XBW.nl VIP XBW.nl VIP

Daantjuhh14 Guest

[2k] XBW.nl VIP XBW.nl VIP

Deel Deze Pagina