nicht angemeldet
css problem
Ersteinmal was ich grundsätzlich erreichen will:
Eine Grafik am linken Rand dann mittig ein Text und rechts am Rand noch eine Grafik. Alles ohne Zeilenumbruch.
Klingt doch echt easy oder ?
Ich habe versucht dies zu realisieren indem ich jedes Element mit <span></span> umgab und dann bei den Bildern den Abstand
zum rechten bzw. linken Rand auf 0 gesetzt habe. Der Text hat zur mittigen Ausrichtung text-align:center; bekommen.
Nun ist mein Problem das all diese Ausrichtungsbefehle im <div> akzeptiert werden aber im <span> nicht.
Was soll ich tun ? Packe ich die drei jeweils in ein <div></div> gibt es ja immer Zeilenumbrüche. Ich muß also <span>
nehmen ?
Bis jetzt habe ich leider nur Lösungen über html (mit Tabelle und so) ohne css gefunden, aber das muß doch irgendwie gehen ?
Ich habe doch nun wirklich nichts schwieriges versucht ?
Falls Ihr mir weiterhelfen könntet wäre das toll und wenn es tatsächlich so ist das der span tag nicht alle Befehle nimmt, seid
doch so gut und sagt es mir!
Und vor allem: wie löse ich nun dieses einfache Problem ?
die url ist das beispiel
-
Hallo,
Probier mal div mit float:left, das ergibt in Deinem Fall eine Art Tabellenstruktur (im weitesten Sinne). Lies in SelfHTML, was bei float beachtet werden muss.
Dieter
-
Hallo cindy,
Ich habe versucht dies zu realisieren indem ich jedes Element mit <span></span> umgab und dann bei den Bildern den Abstand
zum rechten bzw. linken Rand auf 0 gesetzt habe. Der Text hat zur mittigen Ausrichtung text-align:center; bekommen.Das Problem bei <span> ist, dass es ein Inline-Element ist, und du ihm somit keine Breite zuordnen darfst, bzw. du darfst zwar schon, aber es bleibt ohne Auswirkungen. Also fällt span hier schonmal raus.
Nun ist mein Problem das all diese Ausrichtungsbefehle im <div> akzeptiert werden aber im <span> nicht.
Richtig, das liegt wieder daran, dass <span> ein Inline-Element ist und daher nur genausogroß wie sein Inhalt, was eine Ausrichtung innerhalb unmöglich macht.
Was soll ich tun ? Packe ich die drei jeweils in ein <div></div> gibt es ja immer Zeilenumbrüche. Ich muß also <span>
nehmen ?Der Zeilenumbruch wird zwar - da <div> ein Blockelement ist - erzwungen, aber es gibt mit float die Möglichkeit, einem Element zu sagen, wie es von den nächsten Elementen "umflossen" werden soll (siehe http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float)
Dadurch bietet sich dir jetzt die Möglichkeit, folgendes zu tun:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<!-- ... diverse meta-Angaben -->
<title>Seitentitel</title><style type="text/css">
#links {
background-color: #CCCCCC;
float: left;
height: 100px;
width: 100px; }#mitte {
background-color: #EEEEEE;
float: left;
height: 100px;
width: 200px; }#rechts {
background-color: #CCCCCC;
float: left;
height: 100px;
width: 100px; }
</style>
</head><body>
<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div></body>
</html>Wie du siehst, sind die 3 DIVs perfekt nebeneinander, und das ganz ohne Zeilenumbruch. Das Problem, das du jetzt vermutlich haben wirst, ist, dass diese Konstruktion nicht in der Größe skalierbar ist. Gut, du könntest für die Breite der DIVs Prozentwerte verwenden, das ist aber sicherlich auch nicht in deinem Interesse, da ja scheinbar ein Bild nach links und rechts soll, was das Layout im schlimmsten Fall wieder kaputt machen würde.
Zum Glück gibt es aber in CSS die Möglichkeit, Blocklevel-Elemente horizontal auszurichten, nämlich unter Verwendung von margin-left: auto, margin-right: auto, bzw. den beiden kombiniert, um ein Blockelement zentriert auszurichten. Dazu gibt es übrigens einen Tipp&Trick-Artikel: http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
Ersetze die oberen Style-Angaben durch diese:
#links {
background-color: #CCCCCC;
float: left;
height: 100px;
margin-left: 0px;
margin-right: auto;
width: 100px; }#mitte {
float: left;
height: 100px; }#rechts {
background-color: #CCCCCC;
margin-left: auto;
margin-right: 0px;
height: 100px;
width: 100px; }Dies sollte dein Problem nun lösen. Sowohl am linken als auch am rechten Rand ist ein Element mit fixer Breite.
Einziges Problem ist, dass auto-margins bei einigen Browsern nicht funktionieren. Dazu findest du aber im o.g. Tipp&Trick-Artikel einen entsprechenden Workaround.
Grüße aus Darmstadt,
Benjamin -
Hallo,
wie wäre diese Lösung?
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Beispiel für Selfforum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.body {
width:100%; height:100%;
margin:0px; padding:0px;
font-face: verdana, arial, helvetica, sans-serif;
}
.bild {float:left;text-align:center;}
. bild img {margin:20px;}
.text {float:left; background-color:#fff; color:blue; font-size: 20px; margin:30px;}
-->
</style>
</head>
<body>
<div class="bild"><img src="gerflag.jpg" width="170" height="97" border="0" alt="Gerflag"/></div>
<div class="text">Willkommen</div>
<div class="bild"><img src="usflag.jpg" width="170" height="97" border="0" alt="USflag"/></div>
</body>
</htm>Funktioniert bei mir mit IE 5.5 und Mozilla 1.1, nicht im NN 4.75.
Gruß
erika--
Hauptsache dem Hund geht's gut-
Hallo,
Funktioniert bei mir mit IE 5.5 und Mozilla 1.1, nicht im NN 4.75.
Wenn man alles wegläßt, was der N.4.x nicht so mag, geht es auch dort so einigermaßen:
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Beispiel für Selfforum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.body {
font-face: verdana, arial, helvetica, sans-serif;
}
.bild {float:left;text-align:center;}
.bild img {margin:20px;}
.text {float:left; font-size:20px; text-align:center;}
-->
</style>
</head>
<body
<p>So funktioniert es auch einigermaßen mit dem NN 4.x</p>
<div class="bild"><img src="gerflag.jpg" width="170" height="97" border="0" alt="Gerflag"/></div>
<div class="text">Willkommen</div>
<div class="bild"><img src="usflag.jpg" width="170" height="97" border="0" alt="USflag"/></div>
</body>
</html>Gruss
erika
-