Witte border?! wil niet weg

Paquero · 15 jan 2013

Ik ben bezig met een site te maken, moet van school

Niet dat ik het erg vind, maar ik liep ergens vast.

Dit is het:klik

Ik heb geen idee waar ik de bestanden kan uploaden, dus ik zet ze hier in een spoiler.

EDIT: een spoiler werkte niet, dus het staat nu in een quote.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=Battlefield 3" />
<meta name="keywords" content="Battlefield, battlefield 3, hd, shooter, first-person-shooter, games" />

<link href="styles/les112.css" rel="stylesheet" type="text/css">

<title>Battlefield 3</title>
</head>

<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="les11.html">Home</a></li>
<li><a href="#"> Game informatie</a></li>
<li><a href="#"> Systeemeisen</a></li>
<li><a href="#"> Wapens</a></li>
<li><a href="#"> Gamemodes</a></li>
</ul>
</nav>
</header>
<section>
<div id="h1"> <h1>Battlefield 3</h1> </div>
<p>
<img id="img" alt="bf3" title=""/>
</p>
</section>
<footer>
<h6>Gemaakt door Sybren © 2013</h6>
</footer>
</div> 
</body>
</html>

* {
margin: 0;
padding: 0;
}

body {
background: black url(../images/bf3background.jpg) no-repeat no-repeat;
font-family: ‘Times New Roman’, Times, serif;
color: #3366FF;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: 1em;
word-spacing: normal;
letter-spacing: normal;
text-decoration: initial;
text-transform: none;
text-align: left;
text-indent: 0ex;
border: none:
}

header {
width: 100%;
height: 150px;
background: black url(../images/bf3header.jpg) no-repeat no-repeat;
border-width:0px 4px 4px 4px;
border-color: white white white white;
border-style: solid solid solid solid;
text-align: center;
text-shadow:3px 3px 7px black;
}

ul {
color:White;
padding:10px 10px 10px 60px;
border-width:0px 0px 2px 0px;
border-style: solid solid solid solid;
border-color:black black black black;
}

ul li{
display: inline;
padding: 5px;
font-weight: bold;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-size: 20px;
}

ul li:hover{
color: blue;
}

ul li a{
color: white;
text-decoration: none;
}

ul li a:hover {
color : black;
}

section {
border : 4px double black;
margin: 5px;
padding: 5px;
}

article {
margin:5px 10px 5px 10px;
padding: 10px;
background: url(../images/transparant.png) repeat;

}

article h2{
color:#ff4d00;
font-weight: bold:
}

footer {
padding: 10px 0px 0px 20px;
text-align: center;
color: yellow;
}

#wrapper {
width:960px;
margin: 0 auto 0 auto;
}

#h1{
color: yellow;
font-weight: bold;
font-family:cursive;
text-align: center;
}

img#img{
background: url(../images/battlefield3dice.jpg) no-repeat;
width:100%;
height:100%;
}

Ik hoop dat iemand me kan helpen, alvast (hopelijk) bedankt.

Snorvisable · 15 jan 2013

Dag Paquero,

Het is duidelijk de div die een border applied.
Probeer eens een style toe te passen voor de div met border-style: nonen of border:0

Vriendelijke groet,

Bart

csshunter · 16 jan 2013

Of gewoon de witte borders weglaten uit je voorschriften.

Bv.:

Code:

header {
   width: 100%;
   height: 150px;
   background: black url(../images/bf3header.jpg) no-repeat no-repeat;
   [COLOR="#B22222"]border-width: 0px 4px 4px 4px;
   border-color: white white white white;
   border-style: solid solid solid solid;[/COLOR]
   text-align: center;
   text-shadow:3px 3px 7px black;
   }

... kan worden:

Code:

header {
   width: 100%;
   height: 150px;
   background: black url(../images/bf3header.jpg) no-repeat no-repeat;
   text-align: center;
   text-shadow:3px 3px 7px black;
   }

Met vriendelijke groet,
CSShunter

Snorvisable · 16 jan 2013

Dat is de witte border om de header, niet om de content (de div met id h1). Als je dat weghaalt ben je je border kwijt bij je header.
Het is wel zo dat je in border-color maar 1x white hoeft neer te zetten en in border-style maar 1x solid. Op die manier wordt het toegepast op alle 4 de kanten van de border.

Vriendelijke Groet,

Bart

Paquero · 16 jan 2013

Bedankt, maar hoe haal ik dan de border bij de div weg, aangezien ik geen border heb staan bij de wrapper.

Snorvisable · 16 jan 2013

Snorvisable zei:
Dag Paquero,

Het is duidelijk de div die een border applied.
Probeer eens een style toe te passen voor de div met border-style: nonen of border:0

Vriendelijke groet,

Bart

Probeer het eens, ik hoor wel of het lukt. Lukt het niet, kijken we verder naar een geschikte oplossing.

Paquero · 16 jan 2013

Ohja, nu snap ik het, sorry

Ik zal het straks proberen!

csshunter · 16 jan 2013

Hoi Paquero en Snorvisible,

Nop, dat zal niet lukken:

De <div id="h1"> <h1>Battlefield 3</h1> </div> met de gele kop heeft geen border in de css staan. Niet voor die <div>, en niet voor de <h1> zelf.
Uit zichzelf zetten browsers geen borders om iets heen *), dus met een #h1 {border: 0} of #h1{border:none} valt er ook niets weg te halen.

Als je het screenshot bekijkt, zie je ook dat de grijswitte border pas onder die <div> met de gele kop begint:

Wat zit daar?
Daar zit alleen een <p> met een image:

Code:

<section>
    <div id="h1"> <h1>Battlefield 3</h1> </div>
    [B]<p>
        <img id="img" alt="bf3" title=""/>
    </p>[/B]
</section>

Maar voor die <p> en voor dat <img> is in de css óók geen border opgegeven!

Conclusie

De border wordt niet door de css veroorzaakt, en valt met css dan ook niet weg te halen! :shocked:
Er moet iets anders aan de hand zijn!

Als je nog eens goed naar het screenshot lijkt, zie je dat dit verraadt wat er dan wel aan de hand is:

(2x vergroot)

In de linkerbovenhoek van de afbeelding staan de lettertjes "bf3".
Die lettertjes staan niet in het plaatje! (kijk maar als je het plaatje opent)
Dus worden de lettertjes er door de browser in gezet.
Waar staat "bf3" in de html?

Juist, alleen in de alt="bf3" van het <img id="img">.
En wanneer laat een browser de alt-tekst zien?

Juist, alleen als een image niet gevonden kan worden. De alt is een afkorting van "alternative": het alternatief dat getoond wordt als het image niet gevonden kan worden.
Wat doen browsers nog meer als ze een image niet kunnen vinden?

Juist, ze zetten soms een border neer om de plek aan te geven waar het image had horen te staan. Daar is de border!

Kan het image dan niet gevonden worden?

Nee!

Maar het plaatje staat toch wel op het scherm?
Jawel, maar dat is niet het (voorgrond) image waar de alt bij staat, dat is de achtergrond-afbeelding die je er met de css in hebt gezet:

Code:

img#img{
    background: url(../images/battlefield3dice.jpg) no-repeat;
    width:100%;
    height:100%;
}

Door de width: 100% zou het niet-bestaande image de volle breedte moeten innemen van het element waar het in staat (de <p>). En door de height: 100% gaat het niet-bestaande image de volledige schermhoogte innemen.
Dat klopt als een zwerende vinger: daarom is de ruimte van die ongewenste border ook zo groot!

Waarom kan het (voorgrond) image niet gevonden worden?
Juist, omdat in de code <img id="img" alt="bf3" title=""/> geen src="..." staat: de source (=bron), die de vindplaats van een image aangeeft.

Maar als je daar wel de goede vindpaats in zet, dan komt het image er dubbel in: via de html-code als voorgrond-image plus via de css als background-image.
Dat zal niet de bedoeling zijn.

Als je weet wat wel de bedoeling is, wat denk je dat dan de oplossing zal zijn?

Met vriendelijke groet,
CSShunter
_________
*) Behalve soms Internet Explorer: die zet uit zichzelf een rand om een image, als dat in een link zit. Maar dat is hier niet het geval.

Paquero · 16 jan 2013

Het is gelukt! Ik had gewoon wat dingen aangepast met de divjes en plaatjes

Hier is hij nu: (gewoon even om te laten zien

)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=Battlefield 3" />
<meta name="keywords" content="Battlefield, battlefield 3, hd, shooter, first-person-shooter, games" />

<link href="styles/les112.css" rel="stylesheet" type="text/css">

<title>Battlefield 3</title>
</head>

<body>
<div id="wrapper">
<header>
<div id="header">Battlefield 3</div>
</header>
<nav>
<ul>
<li><a href="finalwebsite2.html">Home</a></li>
<li><a href="gameinfo.html"> Game informatie</a></li>
<li><a href="wapens.html"> Wapens</a></li>
<li><a href="gamemodes.html"> Gamemodes</a></li>
</ul>
</nav>
<section>

<article>
<p class="content">
<img class="img" src="images/battlefield3dice.jpg" alt="" title=""/>
</p>
<div id="h1"> <h1>Battlefield 3</h1> </div>

<p>
Deze site is gemaakt voor informatica 4H4. Battlefield 3: Ik heb het nog nooit gespeeld,
maar het spel heeft mooie hd plaatjes en kleuren die passen bij hoe ik mijn site
wil maken. Binnenkort ga ik een nieuwe pc kopen en dan ga ik hem waarschijnlijk wel spelen.
Battlefield 3 is een first person shooter, die ook online kan. Het heeft mooie graphics en heel goed geluid.
Deze tekst is zelf geschreven en is om de home pagina op te vullen.
Vanaf hier is het niet meer zelf geschreven, want de pagina werd te kort.
Een beetje info over Bf3:
Battlefield 3 is een computerspel van het type first-person shooter en de opvolger van Battlefield 2, Battlefield 1942 en Battlefield 2142. BF3 is ontwikkeld door EA Digital Illusions CE en is uitgegeven door Electronic Arts. Het spel is in de Verenigde Staten op 25 oktober 2011 uitgekomen, terwijl dit in Europa twee dagen later gebeurde. De bètaversie kwam in september. Het spel is beschikbaar voor Windows Vista en Windows 7, de Xbox 360 en de Playstation 3.
BF3 zal niet voor de Wii U verschijnen.
Windows XP wordt echter niet meer ondersteund, omdat de nieuwe engine, Frostbite 2, alleen nog DirectX 10 en 11 ondersteunt.
</p>
</article>
</section>
<footer>
<h6>Gemaakt door Sybren © 2013</h6>
</footer>
</div> 
</body>
</html>

* {
margin: 0;
padding: 0;
}

body {
background: black url(../images/bf3background.jpg) no-repeat no-repeat;
font-family: ‘Times New Roman’, Times, serif;
color: #3366FF;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: 1em;
word-spacing: normal;
letter-spacing: normal;
text-decoration: initial;
text-transform: none;
text-align: left;
text-indent: 0ex;
border: none:
}

header {
width: 100%;
height: 150px;
background: black url(../images/bf3header.jpg) no-repeat no-repeat;
border-width:0px 4px 4px 4px;
border-color: white white white white;
border-style: solid solid solid solid;
text-align: center;
text-shadow:3px 3px 7px black;
color: white;
font-size: 35px;
}

ul {
color:White;
padding:25px 100px 25px 248px;
}

ul li{
display: inline;
padding: 5px;
font-weight: bold;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-size: 20px;
}

ul li:hover{
color: blue;
}

ul li a{
color: white;
text-decoration: none;
}

ul li a:hover {
color : #C4F9FB;
}

section {
border : 4px double black;
margin: 5px;
padding: 5px;
}

article {
margin:5px 10px 5px 10px;
padding: 10px;
background: url(../images/transparant.png) repeat;
border: none;
font-size: 120%;
padding:0px 75px 0px 75px;
}

article h2{
color:#ff4d00;
font-weight: bold:
}

footer {
padding: 10px 0px 0px 20px;
text-align: center;
color: yellow;
}

#wrapper {
width:960px;
margin: 0 auto 0 auto;
}

#h1{
font-weight: bold;
font-family:cursive;
text-align: center;
font-size:22px;
margin: 10px 0px 10px 0px;
}

p.content{
text-align:center;
}

img.img{
text-align:center;
}
#header{
font-size:40px;
color: white;
margin:0px auto 0px auto;
padding: 20px 0px 0px 0px;
width:960px;
}

Voorbeeld: http://tinypic.com/r/33aqnmo/6

csshunter · 16 jan 2013

Mooi! Die ziet er een stuk beter uit! :thumb:

Witte border?! wil niet weg

Paquero

Gebruiker

Snorvisable

Gebruiker

csshunter

Meubilair

Snorvisable

Gebruiker

Paquero

Gebruiker

Snorvisable

Gebruiker

Paquero

Gebruiker

csshunter

Meubilair

Paquero

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy