Tekst niet in me achtergrond

**Mike Koopman** · 07-03-2011, 18:45

Hallo,

ik ben bezig met het slicen van een template alleen ik ben tegen het probleem aangelopen dat mijn tekst die bovenop de achtergrond (dus in het vakje moet komen dat die er niet in past). dat komt omdat me tekst zelf al automatisch een margin-top en een margin-bottom meekrijgt. is er iemand die weet hoe ik dat weg kan krijgen?

Code:

<!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>sparuh.nl</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="wrapper">
    
    <div id="background">
    
    	<div id="upper">
        	
            <div id="menu">
            	<ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Aanmelden</a></li>
                    <li><a href="#">Inloggen</a></li>
                    <li><a href="#">Hoe werkt het?</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
       
        </div>
        
        <div id="content">
        
        	<div id="contet_left">
            
            	<div id="up">
                
                	<div id="up_txt">
                        <h1>Sparuh.nl</h1>
                        <p>Maak een gratis account aan 
                        en begin met sparen!</p>
               	 	</div>
                
                </div>
                
                <div id="middle">
                </div>
                
                <div id="down">
                </div>
            </div>
            
            <div id="content_right">
            
            	<div id="methode">
                </div>
                
                <div id="login">
                </div>
            
            </div>
        
        </div>
        
        <div id="footer">
        	
            <div id="footer_bg">
            </div>
            
            <div id="footer_links">
            </div>
        
        </div>
        
    </div>    
    </div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body{
	background: url('bg_00.png') repeat-x;
}

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

#background{
	background: url('bg_01.png') no-repeat;	
	width: 1078px;
	height: 865px;
}

#upper{
	margin-top: 40px;
	position: relative;
}

#menu{
	position: absolute;
	top: 50px;
	font-family: Calibri;
	font-size: 24px;
	color: #212154;
}

#menu :hover{
	color: #ff5400;
	font-family: Calibri;
	font-size: 24px;	
}

#menu li{
	list-style: none;
	float: left;
	padding-left: 33px;	
}

#content{
	position: absolute;
	top: 80px;
	left: 15px;
	margin-top: 13px;
	margin-left: 15px;
}

#contet_left{
	position: absolute;
	height: 740px;
	width: 760px;
	margin-top: 60px;
	margin-left: 245px;
}

#up{
	background: url(layout5_06.gif) no-repeat;
	height: 198px;
	width: 750px;
	position: absolute;
	color: #ff5400;
}

#up_txt{
	text-align: top;
	position: absolute;
	left: 22px;
	width: 480px;
	height: 198px;
}

#up h1{
	font-size: 60px;
	font-family: Calibri;
}

#up p{
	text-align: center;
	font-size: 36px;
	font-family: Calibri;
}

#middle{
}

#down{
}

#content_right{
	width: 292px;
	height: 738px;
	position: absolute;
	margin-top: 60px;
	margin-left: 1000px;
	float: right;
}

#methode{
	background: url(layout5_03.gif) no-repeat;
	height: 438px;
	width: 291px;
}

#login{
}

BVD,

Mike Koopman

**Duin T** · 07-03-2011, 19:27

margin-top: -XXpx;

zou je kunnen proberen

**RMols** · 07-03-2011, 20:05

Beste Mike,

Het is altijd aan te raden (zo niet verplicht :) ) een CSS reset boven in je CSS te zetten. Dan ben je van margins en alle overige "rommel" af.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

**Mike Koopman** · 07-03-2011, 20:34

Origineel gepost door RMols

Beste Mike,

Het is altijd aan te raden (zo niet verplicht :) ) een CSS reset boven in je CSS te zetten. Dan ben je van margins en alle overige "rommel" af.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Beste RMols,

hoe moet ik dit nu eigenlijk zien? Dan word gewoon vooraf een standaard meegegeven en dan moet je alleen de desbetreffende afstanden er nog maar in te zetten?

met vriendelijke groet,

Mike

**T.Voskuil** · 07-03-2011, 23:00

een reset CSS wordt gebruikt omdat verschillende browsers verschillende standaard-instellingen hebben als iets niet wordt aangegeven.

het zou bijvoorbeeld kunnen zijn dat de browser waarin jij kijkt automatisch een margin-top meegeeft van 50px, en dat de tekst daarom opgeschoven wordt. Als je dan als standaard margin-top:0px (margin:0px;) gebruikt zal hij tegen de bovenkant aanschuiven.

Tekst niet in me achtergrond

Tekst niet in me achtergrond

Re: Tekst niet in me achtergrond

Re: Tekst niet in me achtergrond

Re: Tekst niet in me achtergrond

Re: Tekst niet in me achtergrond

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals