✔ Textformatierung

D

D34DL1NES

Erfahrenes Mitglied
Hallo,

ich sitze nun schon seit Stunden an einem Problem welches scheinbar nicht lösbar ist :D

Kurze Beschreibung:
Ich möchte innerhalb einer Box 3 Kategorien habe: info, work, url (diese untereinander. sind ja eigentlich nur boxen, wäre aber auch per <br> möglich da es nur text ist.)
Links soll eine Überschrift sein (h5), dann ein wenig Abstand und dann normaler Text (p). Das klingt sicherlich ein wenig verwirrend also habe ich mal ein Bild angehangen wie das ganze ausehen soll.

Bisher habe ich versucht zwei Boxen zu erstellen (1 links für die Überschriften und 1 rechts für den Text) leider verschiebt sich der Text je nach Browser wie er grade Lust hat und im FF bekommt meine h5 überschrift einfach mal so ein padding-top und padding-bottom von 5-10px obwohl ich das nie irgendwo angegeben habe (IE funktionierts)

Ich hoffe einfach nur dass irgendjemand eine warscheinlich sehr einfach Methode hat diesen verdammten Text ordentlich zu formatieren und das auch so dass er in jedem Browser gleich aussieht. Danke! :)
 

Anhänge

  • Layout.jpg
    Layout.jpg
    53 KB · Aufrufe: 15
Hi,

zeig doch bitte erstmal deinen bisherigen HTML- und CSS-Code, damit man darauf auch näher eingehen kann.

mfg Maik
 
CSS:
HTML: 
#content{width:900px; height:820px; background-color:white; position:relative; left:auto; margin-left:68px; margin-right:auto; margin-top:40px;}
#content #feature{width:auto; height:317px; background-image:url(Images/featurecnt.png); border-bottom-color:#1F1C15; border-top-color:#1F1C15; border-bottom-style:solid; border-top-style:solid; border-bottom-width:4px; border-top-width:6px;}
#content #feature #slider{position:relative; top:auto; left:auto; background-color:#909; height:317px; width:514px; float:left;}
#content #feature #text{position:relative; top:auto; left:auto; background-color:#303; height:317px; width:386px; float:right;}
#content #feature #text #head{background-image:url(Images/InfoHeader.png); background-repeat:no-repeat; height:44px; width:386px;  position:relative; margin-top:15px; margin-bottom:20px; margin-left:0px; margin-right:0px;}
#content #feature #text #head #alpha{width:168px; height:40px; margin:2px; background-image:url(Images/alpha.png); background-repeat: repeat; float:left; position:relative; padding:0px;}
#content #feature #text #head #alpha #title{font-family:sans-serif; color:#0C0807; font-size:30px; position:absolute; top:0px; left:3px;}
#content #feature #text #head #alpha #visit{font-family:sans-serif; font-size:10px; position:absolute; top: 26px; left:4px;}

#content #feature #text #heads{
	width:50px; height:auto; background-color:aqua; float:left;
}
#content #feature #text #txt{
	width:336px; height:auto; background-color:fuchsia; float:right;
}

html:
HTML: 
<div id="content">
	<div id="feature">
    	<div id="slider">
        </div>
        <div id="text">
        	<div id="head">
            	<div id="alpha">
                	<div id="title">advative</div>
                    <div id="visit">visit at: <a href="http://www.advative.pl">www.advative.pl</a></div>
                </div>
            </div>
			<div id="heads"><h5>info:</h5></div>
			<div id="txt"><p>ein kleiner test blah lorem ipsum dolor unsoweiter</p></div>
        </div>
    </div>
</div>

um mein Problem noch ein wenig besser z uverdeutlichen hänge ich zwei Bilder an die zeigen wie es 1. im FF3 aussieht und 2. im IE7
(ich habe eine hintergrundfarbe zu den boxen zugeordnet damit man ein wenig besser nachvollziehen kann wo sie anfangen und enden)

mfg.
 

Anhänge

  • ff.JPG
    ff.JPG
    15,8 KB · Aufrufe: 9
  • ie7.JPG
    ie7.JPG
    15,2 KB · Aufrufe: 10
Setz mal zu Beginn des Stylesheets folgende Regel ein, um für alle im Dokument enthaltenden Elemente ihre Polsterungseigenschaften auf null zurückzusetzen, da sie in den Browsern unterschiedliche Initialwerte besitzen:
CSS: 
* { margin:0; padding:0; }

Dort wo eine dieser Polsterungen erwünscht ist, wird sie im Stylesheet explizit deklariert.

mfg Maik
 
Hat leider nichts gebracht außer dass mein Gesamtcontainer nun ein wenig nach links oben geschoben wurde was auch nicht weiter schlimm ist.
Aber das Problem wie auf den Screenshots aufgezeigt besteht leider immer noch.
 
Nicht das wir ein wenig aneinander vorbei reden, du meinst in dem body{} element soll das rein? Wenn ja, habe ich getan und bei mir tut sich nichts (kann mir dann leider auch nicht erklären weshalb). Wenn du nicht im body Element meinst bitte Code schicken wo du es hinzugefügt hast.
Bei mir sieht das jetzt so aus:
HTML: 
body{font-family:sans-serif; font-size:13px; text-align:left; color:black; background-image:url(Images/Background.png); margin: 0px; padding: 0px}
Mfg
 
Zuletzt bearbeitet:
CSS: 
* {margin:0; padding:0;}
#content{width:900px; height:820px; background-color:white; position:relative; left:auto; margin-left:68px; margin-right:auto; margin-top:40px;}
#content #feature{width:auto; height:317px; background-image:url(Images/featurecnt.png); border-bottom-color:#1F1C15; border-top-color:#1F1C15; border-bottom-style:solid; border-top-style:solid; border-bottom-width:4px; border-top-width:6px;}
#content #feature #slider{position:relative; top:auto; left:auto; background-color:#909; height:317px; width:514px; float:left;}
#content #feature #text{position:relative; top:auto; left:auto; background-color:#303; height:317px; width:386px; float:right;}
#content #feature #text #head{background-image:url(Images/InfoHeader.png); background-repeat:no-repeat; height:44px; width:386px;  position:relative; margin-top:15px; margin-bottom:20px; margin-left:0px; margin-right:0px;}
#content #feature #text #head #alpha{width:168px; height:40px; margin:2px; background-image:url(Images/alpha.png); background-repeat: repeat; float:left; position:relative; padding:0px;}
#content #feature #text #head #alpha #title{font-family:sans-serif; color:#0C0807; font-size:30px; position:absolute; top:0px; left:3px;}
#content #feature #text #head #alpha #visit{font-family:sans-serif; font-size:10px; position:absolute; top: 26px; left:4px;}

#content #feature #text #heads{
	width:50px; height:auto; background-color:aqua; float:left;
}
#content #feature #text #txt{
	width:336px; height:auto; background-color:fuchsia; float:right;
}

mfg Maik
 
Danke vielmals! Ich wusste nicht bzw dachte nicht dass der Stern eine Funktion hat.
Du hast mir sehr weitergeholfen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück