Grafik richtig auf Text positionieren

SimplyFred

Hallo,
vielleicht könnte sich jemand mal den folgenden Code anschauen und mir auf die Sprünge helfen, was da falsch ist.
Beim vergrössern/verkleinern des Fensters im Browser
bleibt der Text "Herzlich Willkommen bla bla
bla bla. bla bla:"
einfach an der gleichen Stelle stehen

Die Bilder head/bg/fuss sind immer schön zentriert in der Mitte.

Das hätte ich auch gerne mit dem Text ...

Was bekomme ich das hin???? Bin am Verzweifeln hier ...

Danke schonmal vorab an die Profis ...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]"> 
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]"> 
<head> 




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Unbenanntes Dokument</title> 
<style type="text/css"> 
<!-- 
body { 
 background-image: url(images/Back.jpg); 
 position: inherit; 
} 
#box2 { 
 position: absolute; 
 top:249px; 
 left:538px; 
 width:402px; 
 height:127px; 
 z-index:0; 
 font:Arial; 
 font-size:10px; 
} 




--> 
</style></head> 






<body> 
<div id="box2"> 
<div align="left">Herzlich Willkommen bla bla <br /> 
    bla bla. 


      <br /> 
      <br /> 
    bla bla:</div> 
</div> 






<table width="914" border="0" align="center"> 
  <tr> 
    <td width="970" height="602" align="center" valign="middle"><div align="center"><img src="images/Head.jpg" alt="head" width="800" height="110" align="absmiddle" /><br /> 
        <img src="images/bild.jpg" alt="bg" width="800" height="400" align="absmiddle" /><br /> 
    <img src="images/Fuss.jpg" alt="fuss" width="800" height="90" align="absmiddle" /></div></td> 
  </tr> 
</table> 
<br /> 
</body> 
</html>

Alles anzeigen

synaptic

also zuerst ist es immer wünschenswert, wenn man die bilder auch zur verfügung gestellt bekommt...
ist zwar hier nicht zwingend nötig, aber eben doch wünschenswert.
ansonsten lass die finger von position:absolute, wenn du nicht damit umgehen kannst.
dann stell ich mir die frage was du mit der tabelle bezwecken willst...

mit divs is des um längen einfacher.. musste lediglich dein css-wissen erweitern

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>Unbenanntes Dokument</title> 
<style type="text/css"> 
<!-- 
body { 
 background-image: url(images/Back.jpg); 
 position: inherit; 
} 
#box2 { 
border:1px solid black;
 width:402px; 
 height:127px; 
 font:Arial; 
 font-size:10px; 
margin: 110px auto 0 auto;
} 
#text{
width:200px;
margin: 35px auto 0 auto;
border:1px solid red;
}
#oben{
width:800px;
height:110px;
display:block;
background:url(images/Head.jpg);
margin:0 auto;
border:1px solid blue;
}
#mitte{
width:800px;
height:400px;
display:block;
background:url(images/bild.jpg);
margin:0 auto;
border:1px solid green;
}
#unten{
width:800px;
height:90px;
display:block;
background:url(images/Fuss.jpg);
margin:0 auto;
border:1px solid blue;
}
--> 
</style></head> 






<body> 


<div id="oben">


</div>
<div id="mitte">
<div id="box2"> 
<div id="text">
Herzlich Willkommen bla bla <br /> 
    bla bla. 


      <br /> 
      <br /> 
    bla bla:</div> 
</div>
</div>
<div id="unten">


</div>


</body> 
</html>

Alles anzeigen

Unregistriert

Super diese Layout passt ja echt klasse.
Eines jedoch könntest Du mir noch versuchen zu erklären.
Was hat es damit auf sich
-------------------------------------------
#box2 {
border:1px solid black;
width:402px;
height:127px;
font:Arial;
font-size:10px;
margin: 110px auto 0 auto;
}
-------------------------------------------

Würde es nicht reichen - für Texteingaben, das folgende zu benutzen?
-------------------------------------------
#text{
width:200px;
margin: 35px auto 0 auto;
border:1px solid red;
}

Wäre nett, wenn Du mir das noch näher bringen könntest ...

Danke vorab

synaptic

na des eine is deine box und des andere der darin positionierte text
wenn du die box nich brauchst lass se weg
musste danach nur nochma neu die textbox positionieren
und die ganzen border waren nur zur veranschaulichung...

Unregistriert

Klar, das mit den Borders hab ich schon kapiert.

Könnte ich z.B. auch noch weitere Grafiken in die #box positionieren?
Das wäre nämlich schon das nächste Thema?....

synaptic

kannste als hintergundbuild machen...
http://css4you.de
oder machste eben ganz normal die bilder rein wie gewohnt...
positionierung und sowat machste dann wieder via css

SimplyFred

Hallo nochmal und schönes Weihnachtsfest

ich bin jetzt fast am Ziel, das layout sieht im Internet-Explorer gut aus, in Firefox dagegen nicht ...
Also muss da noch irgendwas faul sein ...
Insbesondere der Abschnitt
#arrow1
bis
#text2_orange4
Ist in Firefox verschoben ...

Könnte man das eigentlich in einen Abschnitt zusammenfassen mit identischer Positionsangabe? Dann wäre das Problem doch gelöst, oder?

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>Unbenanntes Dokument</title> 
<style type="text/css"> 
<!-- 
body {
    background-image: url(images/Rahmen.jpg);
    position: inherit;
    font-style: arial;
} 
#box2 {
    width:400px;
    height:127px;
    font:Arial;
    font-size:10px;
    margin: 110px auto 0 auto;
} 
#text1{
    width:400px;
    margin: -285px auto 0 372px;
    font: arial;
    font-size: 10px;
    color: #FFFFFF;
    font-family: Arial;
}


#arrow1 {
    width:35px;
    margin: -27px auto 0 350px;
    color: #F08D00;
}


#text2_orange1{
    width:94px;
    margin: 10px auto 0 372px;
    font: arial;
    font-size: 10px;
    color: #F08D00;
    font-family: arial;
}


#arrow2 {
    width:35px;
    margin: -32px auto 0 474px;
    color: #F08D00;
}


#text2_orange2 {
    width:80px;
    margin: -26px auto 0 496px;
    font: arial;
    font-size: 10px;
    color: #F08D00;
    font-family: arial;
}


#arrow3 {
    width:35px;
    margin: -32px auto 0 573px;
    color: #F08D00;
}


#text2_orange3 {
    width:95px;
    margin: -26px auto 0 595px;
    font: arial;
    font-size: 10px;
    color: #F08D00;
    font-family: arial;
}


#arrow4 {
    width:35px;
    margin: -32px auto 0 687px;
    color: #F08D00;
}


#text2_orange4 {
    width:90px;
    margin: -26px auto 0 708px;
    font: arial;
    font-size: 10px;
    color: #F08D00;
    font-family: arial;
}


#text3{
    width:400px;
    margin: 15px auto 0 372px;
    font: arial;
    font-size: 10px;
    color: #FFFFFF;
    font-family: Arial;
}


#text4{
    width:400px;
    margin: 15px auto 0 372px;
    font: arial;
    font-size: 10px;
    color: #FFFFFF;
    font-family: Arial;
}


#oben{
    width:800px;
    height:110px;
    display:block;
/*    background:url(images/Head.jpg); */
    margin:0 auto;
}
#mitte{
    width:800px;
    height:400px;
    display:block;
/*    background:url(images/bild.jpg); */
    margin:0 auto;
}
#unten{
    width:800px;
    height:90px;
    display:block;
/*    background:url(images/Fuss.jpg); */
    margin:0 auto;
}


--> 
</style>
</head> 






<body> 


<div id="oben">
    <img src="images/Head.jpg" width="800" height="110" /></div>
<div id="mitte">
    <img src="images/Back.jpg" width="800" height="400" />
  <!--             <div id="box2">       -->
<div id="text1">
Herzlich Willkommen bla bla.<br /><br />


bla:</div> 




<div id="text2_orange1" style="width: 92px">
text1<br />
111
  </div> 


<div id="text2_orange2" style="width: 60px">
text2<br />
222
  </div> 


<div id="text2_orange3" style="width: 92px">
text3<br />
333
  </div> 


<div id="text2_orange4" style="width: 89px">
text4<br />
444 
  </div> 




<!--
-->
<div id="arrow1" style="width: 16px">
    <img src="images/Menu_pfeil.png" width="18" height="28" /> 
  </div> 




<div id="arrow2" style="width: 16px">
    <img src="images/Menu_pfeil.png" width="18" height="28" /> 
  </div> 


<div id="arrow3" style="width: 16px">
    <img src="images/Menu_pfeil.png" width="18" height="28" /> 
 </div> 


<div id="arrow4" style="width: 16px">
    <img src="images/Menu_pfeil.png" width="18" height="28" />
  </div> 




<div id="text3">
Test-Text<br />
Test-Text!
</div> 



<div id="text4">
Rufen Sie uns an
</div> 




</div>
<div id="unten">


    <img alt="" height="90" src="images/Fuss.jpg" width="800" /></div>


</body> 
</html>

Alles anzeigen

Grafik richtig auf Text positionieren

Tags

Benutzer online in diesem Thema