Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Slicing een CSS problemen

Mehlkraut - 22/01/2008 09:55 (laatste wijziging 22/01/2008 13:21)
Nieuw lid		Hey mensen Een paar dagen geleden maakte ik een design voor mijn 'soon-to-be' website. Het probleem is alleen dat ik er met mijn CSS en xHTML kennis er niet uit kom met al die div'jes enzo. Ik heb al een dozijn tuts gevolgd maar het kwartje wil maar niet echt vallen denk ik want elke code die ik verzin eindigt in een ramp (beetje overdreven) Dus nu heb ik alle codes maar weggegooid om zo overnieuw te beginnen. mijn ontwerp: www.joshuaboyd.nl Kan iemand me een beetje helpen? Vertellen hoe jij denkt dat het handigste is om de site te verdelen? Misschien een voorbeeld code? Mij een duw in de goede richting geven? Op het moment zie ik door de tuts het bos niet meer.

7 antwoorden

Gesponsorde links

marten - 22/01/2008 10:13
Beheerder		Bedenk eens een betere titel.

Aar - 22/01/2008 11:10 (laatste wijziging 22/01/2008 11:11)
PHP interesse		ga het eerst maar even slicen . Die randen kan je allemaal wel met CSS doen.

Abbas - 22/01/2008 13:04
Crew .NET		Citaat: Bedenk eens een betere titel. Ik wou net hetzelfde zeggen, als je hier iets post dan wil dat meestal zeggen dat je er inderdaad zelf niet uitkomt!

Mehlkraut - 22/01/2008 13:22
Nieuw lid		Zo, now can you give me some advice?

Pieter - 22/01/2008 14:22
SEO guru		Ja. Je header is een afbeelding, dus die slice je als 1 grote afbeelding. Die geef je met behulp van CSS een border links, rechts en onder. Je stelt de padding errond in. Die plaats je in een containerdiv. Die containerdiv heeft oa. Je inhoud, je header, etc. Die geef je een border. Errond nog een div met de buitenste border. Je menu neem je als een lijst die je mbv css horizontaal plaatst. Elke li kan je apart stylen door een bepaalde class waarde eraan toe te kennen. De a:hover geef je dan onderlijning mee. Je tekst style je met css de padding links en rechts (en boven en onder indien gewenst). Eens je dit gedaan hebt gaan we over naar het wegfaden van de borders.

Mehlkraut - 22/01/2008 16:29 (laatste wijziging 22/01/2008 17:48)

Nieuw lid

Ik snap het echt niet, zelfs het meest simpele voorbeeld lukt met niet -_-"

mijn code:

css code - Bekijk de code zonder highlighting - Klap code in

                #container {
width: 810px;
text-align: center;
}

#logo {
background: #FFF url('layout/logo.gif');
}
            
#container {
width: 810px;
text-align: center;
}
 
#logo {
background: #FFF url('layout/logo.gif');
}
 

en de html die erbij hoort:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
	<title>
		Joshua Boyd's Persoonlijke Website 
	</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div id="logo"></div>

</div>

</body>

</html>

<html>
<head>
	<title>
		Joshua Boyd's Persoonlijke Website 
	</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	  <link href="styles.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="container">
<div id="logo"></div>
 
</div>
 
</body>
 
</html>

Citaat:

PieterC Edit: Codetags gebruiken aub..

Pieter - 22/01/2008 18:45

SEO guru

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<title>Geboortesite</title>
<style>
body {
text-align: center;
}
.container {
text-align: left;
width: 800px;
margin:0 auto;
background-color: #ffe;
border: 5px solid black;
}
h1 {
text-align: center;
}

h1 img {
width:700px;
height:200px;
border-left: 4px solid orange;
border-bottom: 4px solid orange;
}
</style>
</head>
<body>
<div class="container">
<h1><img src="header.jpg" alt="header" /></h1>
<p>Hier komt je tekst</p>
<p>Hier komt je tekst</p>


<p>Hier komt je tekst</p>
<p>Hier komt je tekst</p>

<p>Hier komt je tekst</p>

</div>
</body>
</html>

<html>
<head>
<title>Geboortesite</title>
<style>
body {
text-align: center;
}
.container {
text-align: left;
width: 800px;
margin:0 auto;
background-color: #ffe;
border: 5px solid black;
}
h1 {
text-align: center;
}
 
h1 img {
width:700px;
height:200px;
border-left: 4px solid orange;
border-bottom: 4px solid orange;
}
</style>
</head>
<body>
<div class="container">
<h1><img src="header.jpg" alt="header" /></h1>
<p>Hier komt je tekst</p>
<p>Hier komt je tekst</p>
 
 
<p>Hier komt je tekst</p>
<p>Hier komt je tekst</p>
 
<p>Hier komt je tekst</p>
 
</div>
</body>
</html>

Misschien helpt dit je onderweg. Heb het maar heel snel geschreven dus er kunnen fouten in zitten...

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten