hulp bij css

Door Bas Visscher op 22-01-2009 14:27

2.174 views

Hallo,
ik heb een css gemaakt, nu krijg ik zoals je Hier kan zien, links-onder en rechtsboven een wit vlak.
ik denk dat het door de #banner komt maar weet dit niet zeker.

Mijn vraag is:
-wittevlakken linksonder rechtsboven weg
-het menu geen ruimte tussen buttons
-geen blauwe lijn om buttons
-kleinbeetje zwart boven het logo 5 pixels ofzo.

hier de css.


@charset "utf-8";
/* CSS Document */
html{
height: 100%;
}
body {
text-align:center;
height: 100% ;
width: 100%;
margin:0px;
padding:0px;
}
a:link{
color:#990000;
text-decoration: none;
}


#linkervlak{ 
float: left;
width: 20% ;
height: 100%;
background-color:#333333;
}
#middenblok{
float: left ;
width: 60%;
background-color:#000000;
height: 100%;
text-align:left; color:#990000;
a:link; color:#990000;
}
#banner{
border-top-height: 3px;
float: left;
width: 60%;
background-color:#000000;
text-align:center; color:#990000;
margin-left:auto;
margin:auto;
}
#rechtervlak{
float: left;
width: 20%;
height: 100%;
background-color: #333333;
}

Bas Visscher

22-01-2009 20:46

ik gebruik paint.net en als ik daar opsla als jpg ipv png, zie ik de kwaliteit achteruit gaan.

EDIT:
even die plaatjes terzijde,
weet niemand hoe ik die uitlijning goed krijg?

EDIT2:
Waarom werkt het in firefox wel?
daar heb ik de a:link een kleur gegeven wat een mooi effect geeft op de border van de buttons, maar in IE blijft dat lelijk blauw

EDIT2:
Ik heb de div's op de volgende volgorde:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="kindeschilderijen, kinderschilderijtjes, ellen heetebrij, nieuwleusen, schilderijen, verkoop, koop schilderijen">

<link href="test.css" type="text/css" rel="stylesheet"  >
<title>Ellens-art</title>
</head>

<body>

<div id="linkervlak">

</div>
<div id="banner">
    <img src="banner.png" alt="banner copyright 2009"  width="90%"  /><br/>
    <p><a href="index.html"><img src="home.png" /></a><a href="werk.html"><img src="werk.png" /></a><a href="kinderen.html"><img src="kinderen.png" /></a><a href="prijzen.html"><img src="prijzen.png" /></a><a href="contact.php"><img src="contact.png" /></a>
    </p>
    <br/>
</div>
<div id="middenblok">
hier komt de content    
</div>

<div id="rechtervlak">

</div>
<div id="footer">
   -----------------------
 ©opyright 2009 bas visscher
   -----------------------
</div>
</body>
</html>

Leon

23-01-2009 12:07

Zoals ik al eerder aangaf, maak een container div (dus een overkoepelende div voor al je andere divs, rechter en linkervlak uitgesloten) waarin je alle div elementen zet, en die container div relatief positioneert en de divs binnenin absoluut. Vervolgens kun je makkelijk een achtergrond kleur aanbrengen zonder dat je met die witte vlakken zit.

Bas Visscher

23-01-2009 14:24

Hardstikke bedankt!,
ik had je optie al een keer geprobeerd maar was toen vergeten de divs opnieuw in te richten :O.
Dankjewel in ieder geval!!.

Dit is het geworden:


@charset "utf-8";
/* CSS Document */
/* hele pagina html!*/

body {
text-align:center;
height: 100% ;
width: 100%;
margin:0px;
padding:0px;
background-color:#1F1F1F;
}
a:link{
color:#990000;
border-color:#990000;
text-decoration: none;
border-style: none;
border-color: none;
}
a:visited{
text-decoration: none;
color:#990000;
border-color:#990000;
border-style: none;
border-color: none;
}
a:hover{
text-decoration: none;
color: #BB0000;
border-color:#BB0000;
border-style:groove;
}


#linkervlak{ 
float: left;
width: 20% ;
height: 100%;
background-color:#1F1F1F;
}
#middenblok{
float: left ;
width: 60%;
height: 100%;
text-align:left; color:#1A1A1A;
font-family: Calibri;
background-color: #333333;
margin-left: 10px;
margin-right: 10px;
}


#rechtervlak{
float: left;
width: 20%;
height: 100%;
background-color:#1F1F1F;
}

Joey Drieling

23-01-2009 16:53

hey je site ziet er niet egt mooi uit in IE 8 ook niet als ik de Compatibiliteitsweergave aan zet

Bas Visscher

23-01-2009 17:05

ik dacht dat hij goed was, maar dat was alleen in IE7
en firefox lijnt hij ook links uit.

Hoe komt dit??

Help me aub.

Leon

24-01-2009 01:06

Zet dit stukje code in je container:

margin-left: auto;
margin-right: auto;

Pieter Jansen

24-01-2009 01:39

of gooi gewoon bovenin:

* {margin:0; padding: 0; }..

Bas Visscher

24-01-2009 10:24

je bedoelt in de body?
het werkt beide niet..

Tikkes C

24-01-2009 10:29

even over die text-decoraction...

bij een image gaat dit niet werken, het is immers geen tekst.
gebruik --> border: none; (of border-width: 0px;)

Leon

24-01-2009 10:35

phpnoobie schreef op 24.01.2009 10:24
je bedoelt in de body?
het werkt beide niet..

In de css ;)

Reageren

Inloggen om te reageren