Padding Befehl funktioniert nur einseitig.

WarDynasty

WarDynasty

HWLuxx SC2-Champ, HWLuxx SC2-Cup2 Master#1
Thread Starter
Mitglied seit
06.04.2006
Beiträge
909
Ort
Wien
Hallo, hier erstmal die CSS Übersicht:

Code: 
#Content {
	position:absolute;
	left:30px;
	top:157px;
	width:628px;
	height:709px;
	background-image:url(images/Content.gif);
	color:#FFFFFF;
	font-family:zekton;
	padding:22pt;
	font-weight:normal;
}



Und unten habe ich nichts anderes stehn als:

Code: 
<div id="Content">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Trotzdem behält der Text nur zum linken Rand und zu dem Rand oben Abstand. Zu dem unten und rechts nicht.

Wieso? Ich könnte es zwar einfach mit <p> lösen aber es sollte doch auch mit padding gehn? :(
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
das div ist viel grosser als der text. das padding regelt nur den innenabstand eines containers. also wie weit das naechste kind element zum rahmen des eltern elements entfernt dargestellt wird.

das CSS verhaellt sich vollkommen korrekt.

Wie willst du es denn dargestellt haben? wenn die Schrifft "genau" passen sollen und ueberall das padding haben soll, dann lass die hoehe weg.
 
Hab ein Screen gemacht. Auf der rechten Seite geht der Text genau bis an den Rand.
 
gib dem ding doch mal ein "border: 1px solid red" und schau dir das ergebniss an. das CSS passt so.

was sagt denn der firebug inspector dazu? da kannst du dir margins und padding grafisch anzeigen lassen
 
Hehe es ging ganz einfach. Folgendes vor den Text setzen: <p style="text-align:left; margin-left:50px; margin-right:50px">
und fertig :)
 
Hast du ans Boxmodell gedacht? Maße des Divs + Padding + Margin = reale Größe.
So Wies im Screenshot aussieht, ist der Rahmen im Hintergrundbild genau diese 709px breit. Dann kann das nicht passen.
Hast du den Screenshot auch nochmal in 1:1?
 
WarDynasty schrieb:
Hehe es ging ganz einfach. Folgendes vor den Text setzen: <p style="text-align:left; margin-left:50px; margin-right:50px">
und fertig :)
Zum Vergrößern anklicken....
das mag geholfen haben, aber die richtige loesung ist das sicher nicht.

stell das ganze dochmal auf einen webserver damit wir uns das in der richtigen umgebung anschauen koennen.
 
WarDynasty schrieb:
Hier: http://avire.av.ohost.de
Zum Vergrößern anklicken....

Danke... [das Grauen]
Nun gut: Ich verstehe nicht, warum du das Padding in Punkt (pt) angibst, wenn du doch ein Layout mit fixen Pixelbreiten einsetzt. Das würde ich schleunigst ändern, ein Padding von 24px im #Content sollte ausreichen.

Du musst also das Content div auf eine (mit 24px padding) Breite von 580px und eine Höhe von 661px bringen, da du jeweils das Padding oben und unten abziehen musst.
Damit das CSS von jedem Browser richtig interpretiert wird, brauchst du auch noch einen doctye, transitional, besser strict. Bitte beachte außerdem die Konventionen.

Die Schriftart "Zekton" habe ich nicht, folglich erscheint alles in Times New Roman, baue also min. ein Fallback ein oder mach nen Bild draus oder benutze am besten nur Standardschriftarten, wie Arial/Helvetica, Times New Roman/Georgia...
 
Man braucht jewils die Schrift um sie sehen zu können? Wusste ich gar net omg
 
Wie soll das denn sonst funzen? Soll mein Rechner raten wie die Schrift aussieht?

Ausserdem solltest du versuchen von Sachen wie "position: absolute" wegzukommen. Laut Quelltext wurde das alles wohl automatisch generiert. Werf das weg und mach es nochmal von Hand, dann wirst du zu deutlich besseren Ergebnissen kommen.
 
Zuletzt bearbeitet:
Ja kA. Das gehört vielleicht nicht hier rein, aber wie gefällt euch denn so das Design meiner HP?
 
mir ist es deutlich zu dunkel, aber das ist geschmackssache. die streifen gefallen mir gut, aber ich finds doof, dass der text ueber denen liegt. das macht den text nicht lesbarer.
Transparente Kaesten mit runden Ecken sind schon ziemlich abgelutscht. Und ich kann leider nicht sagen wie die Schriften wirken, weil ich die verwendeten Schrifften nicht kenne. Lieber Standartschrifften wie Arial, Trebuchet oder Times New Roman verwenden die sicher vorhanden und auch garantiert lesbar sind. Was im Entwurf toll wirken mag kann im Fliesstext doof aussehen.
 
WarDynasty schrieb:
Ja kA. Das gehört vielleicht nicht hier rein, aber wie gefällt euch denn so das Design meiner HP?
Zum Vergrößern anklicken....

Tut mir leid, aber mir gefällt es garnicht. Alles viel zu starr, sogar soweit, das der Inhalt störend wirkt. Aber gerade um Inhalte gehts.
 
Ok danke. Ich wollte was einfach, deshalb wirkt es vielleicht auch etwas starr.
Ist aber auch mein allererstes Webdesign, das ich mal online gestellt habe.
 
Hallo, habe wieder ein Problem, nämlich mit einer Schriftart.

Ich möchte, dass ein Wort die in Arial MT geschrieben wird und fett ist:

Code: 
<DIV ID="Kopfzeile" >
<p style="color:#794B1B; font-family:Arial MT; font-size:24pt">About Us:</p>   
</DIV>

Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif)
}

Doch es nimmt ständig die Schrift Arial und, und fett wird es auch nicht.

Bitte helft mir .
 
Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
        font: bold "Arial MT";
}

Alternativ:

Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
        font-weight: bold;
        font-family: "Arial MT";
}

<DIV ID="Kopfzeile">
<p>About Us:</p>
</DIV>

Oder:
Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
}

Code: 
<DIV ID="Kopfzeile" >
<p style="color:#794B1B; font: bold "Arial MT"; font-size:24pt">About Us:</p>   
</DIV>


Grundsätzlich gehören Designsachen nicht in das HTML-Dokument. Ich nehme an, daß soll sowas wie eine Navigation werden, also löse das doch über eine vernünftig formatierte Liste, dort kannst du dann eine css-Klasse nutzen, um genau das zu realisieren was du haben möchtest. Auch empfiehlt es sich, die Seite mal ohne CSS zu betrachten, ob sie dann noch lesbar ist.

Arial MT ist wieder eine Schriftart, die ich zum Beispiel nicht habe ;)
 
pajaa schrieb:
Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
        font: bold "Arial MT";
}

Alternativ:

Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
        font-weight: bold;
        font-family: "Arial MT";
}

<DIV ID="Kopfzeile">
<p>About Us:</p>
</DIV>

Oder:
Code: 
#Kopfzeile {
	position:absolute;
	left:276px;
	top:160px;
	width:748px;
	height:246px;
	background-image:url(images/Kopfzeile.gif);
}

Code: 
<DIV ID="Kopfzeile" >
<p style="color:#794B1B; font: bold "Arial MT"; font-size:24pt">About Us:</p>   
</DIV>


Grundsätzlich gehören Designsachen nicht in das HTML-Dokument. Ich nehme an, daß soll sowas wie eine Navigation werden, also löse das doch über eine vernünftig formatierte Liste, dort kannst du dann eine css-Klasse nutzen, um genau das zu realisieren was du haben möchtest. Auch empfiehlt es sich, die Seite mal ohne CSS zu betrachten, ob sie dann noch lesbar ist.

Arial MT ist wieder eine Schriftart, die ich zum Beispiel nicht habe ;)
Zum Vergrößern anklicken....

Du hast kein Arial MT? Das hat doch jeder?
 
WarDynasty schrieb:
Du hast kein Arial MT? Das hat doch jeder?
Zum Vergrößern anklicken....

  • Arial
  • Arial Black
  • Arial Narrow

+ All ihre Schnitte (Fett, kursiv, fett kursiv) sind die Arialtypen, die ich habe.
Aber: Arial MT ist wiederum nur ein anderer Name für Arial, laut Wiki.

Kannst du mal ein Overlay von beiden machen? ein großes R und ein kleines e vielleicht?
 
Anmelden, um zu antworten.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh