een kader maken in content

Status
Niet open voor verdere reacties.
C

Carley

Gebruiker
Lid geworden
19 jun 2012
Berichten
6
Hallo,

Ik heb in het midden van mijn pagina een content van 900 pixels, daar wil ik graag een kader (een klasse maken) in maken van 700 pixels met daaromheen een rand.
Nu krijg ik dat kader er wel in maar niet horizontaal uitgelijnd in het midden van mijn content.
Kan iemand me helpen hoe ik dit oplos?

groetjes, Carley
 
Hoi Carley,
Een {margin: 0 auto;} is wat 't 'm doet. De auto = automatisch eerlijk tussen L en R verdelen wat over is van de opgegeven breedte:
Code: 
.kaderclass {
    width: 700px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid green;
}
Wil je er binnen het kader nog wat speling L/R in hebben zodat de tekst niet pal tegen de rand aan staat, dan kan dat met een padding. Een padding komt altijd bij de opgegeven maten. Dus als je met L en R een padding van 20px wilt uitkomen op een totale breedte van 700px (binnen de border), moet er twee keer 20px van af:
Code: 
.kaderclass {
    width: 660px;      /* + 20px padding-L + 20px padding-R = 700px *?
    margin: 0 auto;
    padding: 20px;
    border: 1px solid green;
}

Met vriendelijke groet,
CSShunter
 
hallo CSShunter

Bedankt voor je meedenken maar tot zover was ik zelf ook, ik krijg alleen dat kader zelf niet in met midden van mijn content.
ik hoop dat je me hier ook mee kunt helpen?

met vriendelijke groet,
Carley
 
... kader zelf niet in met midden van mijn content
Klik om te vergroten...
Hé, dat zou niet moeten mogen! Het zou nu goed moeten gaan.
Dus is er iets anders aan de hand dat dwars ligt.


  • Werk je soms het absolute posities (apDiv's)?
  • En heb je een linkje naar de ProbleemPagina (of een online testpagina)?
Dan kunnen we exact zien wat er mis gaat, en wat de omstandigheden zijn; zonder de complete html en css valt het anders moeilijk te duiden.

Met vriendelijke groet,
CSShunter
 
ik heb nog geen testpagina dus kopieer en plak ik hem hier maar even

Mijn csss
@charset "utf-8";
body {
text-align: center;
margin: 0px;
padding: 0px;
top: 0px;
position: relative;
background-color: #8aa9d7;
background-image: url(image/achtergrond%20dubbel.png);
background-repeat: no-repeat;
height: auto;
width: auto;
}

#wrapper {
width: 54%;
margin-right: auto;
margin-left: auto;
background-repeat: repeat;
background-color: #abc546;
text-align: center;
padding-right: 5px;
padding-left: 5px;
}
#content {
margin-top: 0px;
padding-top: 0px;
color: #242424;
background-repeat: repeat;
width: 900px;
background-color: #a3c749;
left: 375px;
}
#footer {
margin-top: 12px;
margin-bottom: 12px;
clear: both;
background-color: #abc546;
width: 900px;
}
#logo {
height: 150px;
background-image: url(image/logo%20Kidzhair.jpg);
border: medium solid #a3c749;
width: 896px;
}
#fotobanner {
height: 250px;
width: 900px;
background-attachment: scroll;
}
#nav {
height: 60px;
border-right-width: medium;
border-left-width: medium;
border-right-style: solid;
background-color: #8aa9d7;
border-right-color: #a3c749;
border-left-color: #a3c749;
border-left-style: solid;
width: 896px;
}
#header {

}
#wrapper #content h1 {
text-align: center;
}
.kaderclass {
align: center;
margin: 2px;
padding: 2px;
width: 696px;
border: medium solid #9cb1e6;
}

Mijn HTML
<!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" />
<title>Naamloos document</title>
<link href="css_layout.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>&nbsp;</h1>
</div>
<div id="nav"><img src="image/nav-Home.png" width="258" height="60" /><img src="image/nav-Producten.png" width="234" height="60" /><img src="image/nav-Acties.png" width="183" height="60" /><img src="image/nav-Contact.png" width="215" height="60" /></div>
<div id="fotobanner"><img src="image/fotobanner.jpg" width="900" height="267" />

</table>

</div>
<div id="banner"></div>
</div>
<div id="content"><h1>Hoofdinhoud </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<div class="kaderclass">
<div align="right"><img src="image/romance-of-a-ritual-vidalsassoon-products.jpg" width="262" height="215" />Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Kop niveau H2 </h2>

</div>



<div id="footer">Hier wordt de inhoud voor id "footer" weergegeven</div>
</div>
</body>
</html>

ik hoop dat je er zo ook wat mee kan?
bedankt alvast voor je moeite
 
Hoi Carley,
De #wrapper heeft momenteel een breedte van 54% (en is dus afhankelijk van de schermbreedte van de bezoeker). Maar wat er in zit moet 900px breed zijn. Dus:
Code: 
#wrapper {
    ...
    width: 900px;
}
Zo staat de hele pagina altijd horizontaal in het midden, en vallen er geen gaten in de background (bij een kleinere resolutie dan ca 1650px breed), resp. komt er geen achtergrond naast logo en menu (bij een grotere resolutie dan ca 1650px breed).

Verder is op de .kaderclass nog geen automatische margin L/R toegepast (hij begint nu op 2px vanaf de linkerkant). Daar kan je van maken:
Code: 
.kaderclass {
    ...
    margin: 2px auto;
}
Nu staat de margin onder en boven op 2px, en L/R op auto; en staat ie bij mij in het midden. Bij jou ook?

Met vriendelijke groet,
CSShunter
 
Hallo CSShunter,

Ik heb het voor elkaar, hij staat keurig in het midden.
Ontzettend bedankt voor je tijd en energie die je erin gestoken hebt.

groetjes,
Carley
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan