[HTML + CSS] Text Verschiebt andere Elemente

[m3x]

Bin grade an einer Homepage. Habe einen weißen body. Jetzt möchte ich die Ecken abrunden, und dem body einen Schatten verpassen. Jetzt habe ich auch 3 Bilder (rechts links oben), diese ausgerichtet, sieht super aus, Problem ist nur, dass, sobald ich versuche text unterzubringen sich alles verschiebt.
Habe zum bessern Verständnis noch 2 Bilder angehängt, in dem einen sind die Elemente Markiert (blau: body, rot:Bilder)

Meine HTML-Code:

<div id="header">
   <div class="head_c">
      <div class="head_l">
          <div class="head_r">
             <p>Text Text Text Text Text</p>
             <p>Text Text Text Text Text</p>
             <p>Text Text Text Text Text</p>
          </div>
      </div>
   </div>
</div>

Die CSS:

*{
	margin: 0px;
	padding: 0px;
}
body{
	color: #000;
	background: rgb(109, 159, 192) url(../images/background.jpg) 0 0 repeat-x;
	text-align:center;
	margin-top: 70px;
	margin-bottom: 20px;
}
#header{
	float:left;
	width: 760px;
	height: 130px;
	background-color: #FFF;
}
.head_l{
	position:relative;
	width:18px;
	height: 140px;
	top: 0px;
	left: -10px;
	background: transparent url(../images/header_l.png) no-repeat;
}
.head_r{
	position:relative;
	width:18px;
	height: 140px;
	top: 0px;
	left: 762px;
	background: transparent url(../images/header_r.png) no-repeat;
}
.head_c{
	height: 30px;
	width: 760px;
	position:relative;
	margin: 0px;
	top: -10px;
	left: 0px;
	background: transparent url(../images/header_c.png) 100% 0 repeat-x;
}

Bin halb am verzweifeln....

 

[riod]

vertsehe das problem nicht, sieht doch top aus

 

[m3x]

oh sorry.. im quellcode steht natürlich NICHT

<p>Text Text Text Text Text</p>
<p>Text Text Text Text Text</p>
<p>Text Text Text Text Text</p>

 

[SharenZ]

hmm ich seh eigentlich keinen unterschied an den bildern vom boxenmodell her

 

[m3x]

ehm also *ups*
das sind beides die gleichen Bilder (BEIDE OHNE) text, das orangene soll nur zeigen wo der text hinsoll, was aber nicht geht, da sich dann alles verschiebt, bzw sieht es im ff gut aus sieht es dafür im ie nicht gut aus

 

[SharenZ]

ja firefox und internet explorer interpretiren das boxen modell anders... leider

du musst eine browserweiche benutzen.

da gibt es jetzt 2 möglichkeiten:

1. du benutzt css deklirationen die der ie nicht kann und somit nur der ff ausführt und dann benutzt du das conditional comment von ie.
das is alles recht kompliziert und deswegen benutzt man das eig nur wenn man kein js verwenden will/darf

2. javascript
du benutzt das navigator objekt und fragst ab welcher browser es ist jedoch musst duaufpassen da sich der ff als ie ausgibt und umgekehrt du musst eben schauen wo sich die objekte unterscheiden und dann eben mit write eine andere css datei laden.

wenn du dabei hilfe brauchst kannst du mir gerne eine pm schreiben

 

[m3x]

cool danke, probier ich mal aus, ansonsten muss eine Tabelle herhalten ...

 

[Jane Dee]

Verlinke doch mal die Seite, dann kann ich dir vielleicht helfen.
So wie du es jetzt schilderst, weiß ich nicht wo dein Problem ist?!

P.D.

 

[m3x]

ehm... jetzt fress ich einen besen...es geht...
hab die ganze zeit offline gearbeitet...*kopf gegen die wandschlag*
hier mal der link: http://fabis-page.com/page23/page23.php

 

[Tompson]

OT:

bin ein html noob, hab mir html und css schon ein wenig angesehen und würde auch gern so eine page bauen, ich mein mit dem blatt und dem schatten das sieht ziemlich gut aus!

wie fang ich am besten an?
wie sieht hier das boxed modell aus? vor allem mit den float befehlen kenn ich mich nicht aus...
selfhtml? oder gibts auch andere brauchbare seiten?

thx

mfg
tompson

 

[m3x]

also ehm, das ist relativ einfach *hust*

du brauchst ein gutes Pixel-Grafik-Programm (ich selber habe Corel PhotoPaint 12 - kostet nicht so viel) damit lassen sich dann die Schatten malen in dem du die Seite, quasi malst. damit die Homepage nicht nur aus Bildern besteht werden Flächen mit gleicher Farbe via css definiert. die Bilder werden (wie in dem Quellcode zu sehen) einfach angeordnet.

Selber fange ich mit Blattpapier und Bleistift an. Danach wird alles im PC "gemalt" und geschaut wie sich die Elemente am schönsten und vor allem sinnvolsten anordnen lassen.

Um dir das Boxed modell anzuschauen empfehle ich dir für ff das Plugin "WebDeveloper" mit outline > outlne block level elements aknnst du dir den aufbau anschauen. So kannst du auch bei deinen "vorbildern" spickeln wie es da gemacht wurde.

Wegen den float befehlen usw. google und self html helfen weiter, ich selber habe mir das buch "professionelles webdesign mit xhtml und css geholt) kostet allerdings auch 30 €, und ist eher weniger was für einen n00b, Grundkentnisse sind erforderlich

Kannst ich habe mit einem CMS angefangen (joomla). da gibts viele fertige templates, die kann man auch naträglich nach seinen wünschen anpassen und herum experimentieren.

viel erfolg

 

[Jane Dee]

@Tompson

Ich baue mir das Grundgerüst immer mit Fireworks zusammen. Das lässt grafisch kaum Wünsche offen. Die Tabellen übernehme ich dann in meine Includes etc.. Texten tue ich nur mit htmledit.

Selfhtml ist ne gute Anlaufstelle für das HTML-1mal1. Wenn du dich allerdings mit PHP beschäftigen solltest, empfehle ich dir, ein gutes Buch zu kaufen.

 

[Tompson]

danke für die tipps!

werde mir gleich mal das ff plugin besorgen um mir diverse box modelle anzusehen, dass mit den seiten vormalen find ich auch genial, ich hab mich immer gefragt wie man so schöne effekte (schatten etc.) hinbekommt!

aiai, werd mich mal reinklemmen und sehen was sich tut...

fireworks kenne ich bis jetzt nicht, ist das ein grafik programm oder ein html editor?
dreamweaver hab ich mal getestet, ist eigentlich auch recht einfach, allerdings würde ich
lieber mehr mit hand coden als mit einem WYSIWYG editor herumzuspielen, allerdings ist
so ein editor dann auch wieder recht nützlich.

joomla werd ich mir auch anschaun, ein cms ist sicher sinnvoll

mfg
tompson

 

[Jane Dee]

FIREWORKS - einfach bei Google eingeben.

War früher Macromedia - gehört jetzt zu Adobe.
Wenn du mehr von Hand coden willst, solltest du dich aber mit den Grundbegriffen des HTMLs auskennen. Ansonsten ist Dreamweaver für den Anfang nicht schlecht. Auf keinem Fall Frontpage benutzen - macht irgendwie alles anders, als man will...