Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Frage zur Text und Grafik Positionierung

Antwort erstellen

Frage zur Text und Grafik Positionierung

Beitragvon lil-tramp » 25.06.2007, 21:03

Hallo allseits,

ich bastel gerade an folgender Homepage:
http://fixdesign.fi.funpic.de/bilch/index.html

jetzt hab ich eine Frage und zwar, ist es möglich die ganz untere Grafik so zu positionieren das sie immer mitrutscht wenn ein längerer text eingesetzt wird?
Ich lasse die Texte mit php includen und leider ist es so das bei einem längeren der Text über die Grafik hinausgeht.
Ich hoffe ihr versteht was ich meine, der Text soll quasi immer im hellgrünen bereich bleiben und die untere Grafik immer mitrutschen.

Danke schonmal im vorraus für die Hilfe.
- Katrin
P.S. ja ich weiß da ist noch nicht alles perfekt ;)
lil-tramp
neu hier
 
Beiträge: 3
Registriert: 25.06.2007, 20:57
Nach oben

Beitragvon Laus » 25.06.2007, 22:16

Hallo

Womit hast du diesen Code erstellt? mit MS Word?

Wo fange ich da an?

also: so wie der Code jetzt ist klappt das mit dem footer auf keinen Fall.

Strukturiere deine Seite erst einmal richtig so nach dem Schema
Code: Alles auswählen

<div id="wrapper"> der zum zentrieren der Seite benutzt wird und dein back.gif als Hintergrund hat

<div id="header"> der als Hintergrundbild dein top2.gif enthält

</div>  header Ende

<div id="navi"> in dem die Navigation ist und das mit float:left; positioniert wird

</div>  nav Ende

<div id="content"> wo der Inhalt der Seite drinn ist und das rechts neben der Navigation positioniert ist

</div>  content ende

<div id="footer"> der dein bottom.gif als Hintergrund hat und in dem das float von navi und content gecleart wird

</div>  footer ende

</div>  wrappper ende


so das wars eigentlich wenn du das so umsetzt dann erweitert sich der Content automatisch und passt sich immer dem Inhalt an.

Schau dir mal dieses Tutorial dazu an das beschreibt eigentlich genau das was ich etwas umständlich beschrieben habe.

Die navigation gehört in eine Liste
Das <p> ist die auszeichnung für einen Absatz und soll auch so verwendet werden.

So das war jetzt ziemlich viel fürs erste. aber guter code sorgt auch für gute Ergebnisse

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon lil-tramp » 26.06.2007, 20:24

Hallo Xaver,

danke für deine schnelle antwort.
Habe das so wie du das geschrieben hast mal versucht und komme eigentlich auf ein noch schlechteres ergebnis. Da fand ich mein "chaos" doch besser: http://fixdesign.fi.funpic.de/bilch/neu.html

Ich glaube ich habe das mit dem float und clear noch nicht ganz verstanden.
Code sieht wie folgt aus:

Code: Alles auswählen
body
{ margin: 0; padding: 0; background-color: black; }

#wrapper { background-image:url(back.gif); background-repeat:repeat-y;
background-position: 103pt; background-attachment: fixed }

#header { background-image:url(top2.gif); background-repeat:repeat-none;
background-position: 137px; background-attachment: fixed }

#navi {position: absolute; top:160px; left:215px; float:left; font-weight: bold;
font-size: 12px; color: #FFFFFF; font-family: verdana }

ul { list-style-type:none; }

#content {position: absolut ; top:160px; left:315px; font-size: 12px;
color: #FFFFFF; font-family: verdana; float: right; }

#footer { background-image:url(bottom.gif); background-position: 103pt; clear: both;}


Ich weiß das mit der navi is noch nich richtig, aber daran kanns auch nicht liegen oder?
Wäre nett wenn du mir nochmal was auf die sprünge hilfst, bin mit dem ganzen noch nicht ganz so geübt ;)

Lg
Katrin
lil-tramp
neu hier
 
Beiträge: 3
Registriert: 25.06.2007, 20:57
Nach oben

Beitragvon Laus » 27.06.2007, 00:30

Hab dir mal deine Seite auf die schnelle gecodet, zumindest die grundzüge.
Mit den eingefügten Kommentaren ist das ganze hoffe ich auch nachzuvollziehen.
Das HTML
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta name="author" content="huhn">
<link href="neu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper"> <!--Zum zentrieren der Seite-->
<div id="header">
<h1>Kathies Afrkanische Siebenschläfer</h1>
</div><!--Ende Header-->
<div id="navi">
<ul><!--beginn Liste-->
<li><a href="#">Home</a></li>
<li><a href="herkunft.html">Herkunft</a></li>
<li><a href="#">Terrarium</a></li>
<li><a href="#">Nahrung</a></li>
<li><a href="#">Zucht</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Kontakt</a> </li>
<li><a href="#">G&auml;stebuch</a></li>
</ul><!--Ende Liste-->
<p>ACHTUNG:
<br />Kleine Schl&auml;fer abzugeben!!</p>
</div><!--Ende navi-->
<div id="content">
<h2>Herzlich Willkommen zu den Afrkanischen Siebenschläfern</h2>

<p>Wie kommt man als Vogelspinnen Mitbesitzer und Katzenhalter zu afrikanischen Siebenschläfern?<br>
Das unfertige Terrarium war ein Geschenk. Ursprünglich sollten Wasserschildkröten dort einziehen. Nach Erkundigungen bin ich aber skeptisch geworden. Es gibt leider wenig gute Erfolge in der Haltung dieser empfindlichen Tiere.
</p>
<p>
Der Besuch unserer beliebten Terra Ausstellung in Köln sollte dann neue Infos bringen. Am Stand eines Züchters sind uns dann diese niedlichen Schläfer begegnet. <br>Es war sofort klar, dass wir diese schönen Tiere mitnehmen würden.
Dass es noch wenig Infos und Erfahrungen über die Haltung von afrikanischen Siebenschläfern gibt, wurde uns erst später bewusst. Mit ihrer Haltung bewegt man sich auf Neuland, aber das ist auch sehr interessant.</p>
<p>
Kontakt mit Liebhabern dieser süßen Schläfer erwünscht</p>
<p>
<i>Kathie Meier</i></p>
</div><!--Ende content-->
<div id="footer">&nbsp;</div><!--Ende footer-->
</div> <!--Ende wrapper-->
</body>
</html>

und die dazugehörige CSS Datei
Code: Alles auswählen
body
{
margin: 0; padding: 0;
background-color: black;
font-family: verdana;
font-size: 100.01%;
text-align:center; /*Hack für IE 5.5 und älter*/
}
a:link{
color: #33CC33;
text-decoration:none;
}
a:visited {
color: #FFFFFF;
text-decoration:none;
}
a:hover
{
color: #FFFF00;
}
a:active
{
color: #FFFFFF;
text-decoration:none;
}
#wrapper
{
margin:0px auto;
background-image:url(back.gif);
background-repeat:repeat-y;
width:750px;
font-size: 80%;
text-align:left; /*aufheben des IE Hacks*/
}
#header
{
background-image:url(top2.gif);
background-repeat:no-repeat;
height:202px;
}
#header h1 {display:none;}
#navi
{
float:left;
font-weight: bold;
min-height:324px;
background-image:url(navi.gif);
background-repeat:no-repeat;
background-position:17px;
width:166px;
color: #FFFFFF;
}
* html #navi {height:324px;}/*für IE6*/
#navi p {padding :20px;}
#navi ul {list-style-type:none; }
#navi ul li {margin:10px 0 0 0px;}
#content
{
margin: 10px 40px 0px 180px;
color: #000;
}
#footer
{
background-image:url(bottom.gif);
clear: both;
height:131px;
}

Wenn du willst kannst du den Code so übernehmen im ihn dann noch weiter auszubauen.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon lil-tramp » 28.06.2007, 18:35

WOAH! Sag ich da nur! Vielen, vielen Dank! Das ist echt klasse :) :)
lil-tramp
neu hier
 
Beiträge: 3
Registriert: 25.06.2007, 20:57
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Frage zur Text und Grafik Positionierung"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de