PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
W

Plaatsen van tekst in achtergrond image...

Door Wouter OOP op 29-12-2008 22:13
396 views
Hallo allemaal,

een vriend en ik hebben in photoshop wat designed en gesliced...

http://img366.imageshack.us/my.php?image=helpwt9.jpg

hierboven het probleem, wat de pijl weergeeft zijn spaties die ik in een andere html heb neergezet (doormiddel van een include in de index.php) zodat zo op de juiste plek "Welkom" komt te staan.

Maar dat is gewoon stom en onoverzichtelijk als je de tekst weer eens wilt verranderen en al die spaties moet gaan zetten, + het is gewoon lelijke code.

Moet ik het anders in elkaar zetten?
Doe ik iets heel doms?
Of is m'n code zoiezo al een rotzooi?

Laat het me alstublieft weten :)


index.php:


<html>

<head>

<LINK REL="stylesheet" HREF="opmaak.css" TYPE="text/css">

</head>

<body>

<div id="container">

<div id="header"></div>

<div id="menu"><a href="index.php"><img border="0" src="images/button.png"></a></div>

<div id="content-boven"></div>

<div id="content-onder">

<div id="content-tekst"><?php include("nieuws.html");?></div>


</div>

</div>

</body>

</html>


opmaak.css:


body
{
color:              #FFFFFF;
text-align:         center;

background-image:   url("images/achtergrond.jpg")
}

#container
{
width:              827px;
height:             600px;
margin-left:        auto;
margin-right:       auto;
text-align:         left;
}

#header
{
width:              830px;
height:             119px;
background-repeat:  no-repeat;
background-image:   url("images/banner.png")
}

#menu
{
width:              830px;
height:             50px;
background-repeat:  no-repeat;
background-image:   url("images/menu.png")
}

#content-boven
{
width:              829px;
height:             60px;
background-repeat:  no-repeat;
background-image:   url("images/bovenstuk.png")
}

#content-onder
{
width:              829px;
height:             457px;
background-repeat:  no-repeat;
background-image:   url("images/onderstuk.png")
}

#content-tekst
{

}
S
Sander
30-12-2008 08:28
Gewoon even een margin-left: xxpx inzetten in #content-tekst{}

Zoals je de situatie zo zei denk ik dat dit de beste oplossing is.


ik vermoed dat nieuws.html iets is in deze aard ?



&nbsp; &nbsp; &nbsp; Welkom


Je kan ook gewoon werken met een soort van hidden div in die content-tekst




<div id="content-tekst"><div id="margin_div"> All je tekst dus hier, in dit geval je include(); Je kan dus gewoon perfect normale opmaak gebruiken zonder spaties</div></div>

#margin_div {

 margin: 10px;

of

 margin-left: 10px;



Hopelijk helpt dit je een beetje ?


(ps. Als je een gewone margin: ..px neemt zal je dus ook mooi je tekst 'vak' kunnen afzetten zodat er ook rechts niets buiten je gebied komt) :)


Sander
B
Barman V
30-12-2008 08:34
Hiervoor kan je beter padding gebruiken en niet margin. Het op deze manier gebruiken van margin kan leiden tot incompatibiliteit tussen de browsers (test maar met IE en FF).

Dus in de #content-tekst moet je een padding-left aanmaken.
Jesper Diovo
30-12-2008 09:57
Sander schreef op 30.12.2008 08:28
(ps. Als je een gewone margin: ..px neemt zal je dus ook mooi je tekst 'vak' kunnen afzetten zodat er ook rechts niets buiten je gebied komt) :)


Dat heeft niets met margin te maken, je hebt het over padding. Margin is de marge tussen het element en het element waar het in staat. Padding is tussen het element en de tekst/elementen die in het element staan.
S
Sander
30-12-2008 10:07
? Het eindresultaat is toch hetzelfde, je zet gewoon die div (margin_div) zoveel pixels naar rechts. Dus als je aan margin_div geen stijl geeft zal dat uiteindelijk toch voor de gebruiker op hetzelfde neerkomen?
Jesper Diovo
30-12-2008 10:13
Niet als die margin_div een bepaalde stijl heeft.. Maar waarom zou je nieuwe elementen aan gaan maken als je het met een bepaalde eigenschap toekennen aan het andere element ook al redt?

Overigens moet ik nog even terugkomen op het slicen. Gezien de indeling van je code ben je helemaal verkeerd aan het slicen gegaan. De header en het menu kan ik inkomen, maar van je content klopt niets. Volgens mij zit het witte stuk vast aan het grijze? Dat mag niet kunnen, zo kun je nooit een kant op met het grijze stuk. Zorg dat het altijd zo los mogelijk is, zodat het niet afhankelijk van elkaar is en je dus altijd alle kanten op kan zonder weer alle afbeeldingen te moeten vervangen.
W
Wouter OOP
30-12-2008 12:05
allemaal bedankt voor jullie reacties, Jezpur, over dat slicen geef ik je gelijk, maar ik zou niet weten hoe ik dit anders zou kunnen oplossen...

dan zou ik namelijk het grijze stuk apart moeten slicen maar dan krijg ik het nooit op dezelfde plek, niet met mijn kennis...



bedankt tot zover, ik ga wat proberen...
Jesper Diovo
30-12-2008 12:12 

<body>

<div id="main">
  <div id="header">
    <div id="menu">Home</div>
  </div>

  <div id="container">
    <div id="container-top"></div>
    <div id="iets">Nieuws</div>
    
    <div id="boxes">
      <div id="box-grey">
        <div id="box-grey-top"></div>
        Welkom
        <div id="box-grey-foot"></div>
      </div>
      <div id="box-right"></div>
    </div>
    <div id="container-foot"></div>
  </div>
</div>

</body>


Zo zou ik het doen... box-grey-top met een negatieve margin boven het grijze uitrekkende vak zetten en box-grey-foot ook op zo'n manier verwerken, zodat de hoekjes gewoon transparent kunnen zijn.

Het kan zijn dat je voor het welkom deel nog een body-div nodig hebt, waar je dan de achtergrond kleur inzet - die meerekt -, maar dat hoeft niet als je het goed doet.

Reageren

Inloggen om te reageren