[CSS]Tekst verplaatsen binnen div - Softwareontwikkeling

vrijdag 31 augustus 2007 08:07

Acties:

Topicstarter

Ik ben een site aan het maken met CSS layout (divs), maar ik loop steeds tegen een probleem op:
Als ik een div maak en daar tekst in zet, dan wordt de tekst in de linkerbovenhoek geplaatst. Maar ik wil dat de tekst iets van de rand af komt te staan. Ik heb op de div al een margin geprobeerd, maar dan verplaatst hij de tekst mee. Ook heb ik position: absolute geprobeerd, dan kan ik heb weliswaar van de rand af krijgen, maar dan overlapt hij rechts een andere div. Ik kan dat wel met <BR> oplossen, maar omdat de site regelmatig vernieuwd wordt, is dat helemaal niet handig.
In news.php en container.php staat tekst. Ik kan die ook wel posten maar dat wordt de pagina nog voller.. En het gaat om de CSS code dacht ik.
De code van index is als volgt:

HTML:

<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wessels Shop Home</title>

<style type="text/css">
body, html{
background: url(img/background.jpg);
font-family:myriad web pro;
margin-left:5%;
margin-right;5%;
}

.link_news A:link {text-decoration: none; color: white}
.link_news A:visited {text-decoration: none; color: white}
.link_news A:active {text-decoration: none; color: white}
.link_news A:hover {text-decoration: underline; color: white}

.link A:link {text-decoration: none; color: #5c5c5c}
.link A:visited {text-decoration: none; color: #5c5c5c}
.link A:active {text-decoration: none; color: #5c5c5c}
.link A:hover {text-decoration: underline; color: #5c5c5c}

div#header{
background: url(img/header.jpg) no-repeat;
width: 740px; 
height: 86px;
}

div#navnews{
float:left;
}

div#randimg{
float:left;
}

div#news{
background: url(img/news.jpg) no-repeat;
width: 211px;
height: 428px;
font-size: 10pt;
color: white;
}

div#container{
background-color: white;
float:left;
width: 519px; 
height: 548px; 
color: #5c5c5c; 
font-size: 10pt;
}

div#footer{
background: url(img/footer.jpg) no-repeat;
clear: both;
width: 740px;
height: 63px;
font-size: 10pt;
color: #5c5c5c;
}

</style>

</head>

<body>
  <div id="header"><?php include("header.php") ?></div>
  <div id="navnews">
  <div id="navigation"><?php include("navigation.php") ?></div>
  <div id="news"><?php include("news.php") ?></div>
  </div>
  <div id="randimg"><?php include("randimg.php") ?></div>
  <div id="container"><?php include("welcome.php") ?></div>
  <div id="footer"><?php include("footer.php") ?></div>
</body>
</html>

vrijdag 31 augustus 2007 08:09

Acties:

sopsop

[v] [;,,;] [v]

Ik denk dat je op zoek bent naar de padding:

Cascading Stylesheet:

div#news{ 
background: url(img/news.jpg) no-repeat; 
width: 211px; 
height: 428px; 
font-size: 10pt; 
color: white; 
padding:10px;
}

[ Voor 3% gewijzigd door sopsop op 31-08-2007 08:09 ]

vrijdag 31 augustus 2007 08:09

Acties:

Blacksnak

Cascading Stylesheet:

1	padding: .....

edit:

spuit11 ...

[ Voor 29% gewijzigd door Blacksnak op 31-08-2007 08:10 ]

vrijdag 31 augustus 2007 16:32

Acties:

huorpalantir

Topicstarter

bedankt ja, die zocht ik. Ik moest een div maken met padding binnen de div met de background, anders werd de achtergrond meeverplaatst.

Cascading Stylesheet:

<div style="padding: 10px">
  <div style="background-image: background.jpg">
    contents
  </div>
</div>

vrijdag 31 augustus 2007 16:36

Acties:

disjfa

be

huorpalantir schreef op vrijdag 31 augustus 2007 @ 16:32:
bedankt ja, die zocht ik. Ik moest een div maken met padding binnen de div met de background, anders werd de achtergrond meeverplaatst.

Margin.

disjfa - disj·fa (meneer)
disjfa.nl