andere Möglichkeit für word spacing ... @ tutorials.de: Tutorials, Forum & Hilfe

buddha · 17.05.07 21:54

Hallo,
Ich habe eine Vorlage vom Tabellendesign in CSS "umgeschrieben". Habe zwar schon im CSS Codebook gesucht aber nichts gefunden.
1 Wie auf den Foto zu erkennen ist, sind die links eng beieinander. Weder mit der Anweisung
word-spacing oder font-stretch habe ich einen grösseren Abstand erreicht, wobei bei mir word-spacing im IE fehlerhaft dargestellt wird. Im FF ist der Text auch schwarz und im IE blau

. Gibt es noch eine andere Möglichkeit ausser einem Zeilenumbruch den Text
vor dem Bild rechts so zu gestalten das der Text nicht über das Bild geht?
Hier der Code
HTML

Code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gr&uuml;n&nbsp;mit&nbsp;CSS</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content"> <img id="logo" src="bilder/header.jpg" alt="Wasserfall" />
  <h1 align="center">Hier den Namen eintragen </h1>
  <div id="button">
 
    <div align="center"><a href="index.html">Start</a>&nbsp;
      <a href="leistung.html">Leistung</a>&nbsp;
      <a href="produkte.html">Produkte</a>&nbsp;
      <a href="kontakt.html">Kontakt</a>&nbsp;
      <a href="referenzen.html">&Uuml;beruns</a>&nbsp;
      <a href="impressum.html">Impressum</a></div>
  </div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus 
    ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec
    quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id 
    arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec
    sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</body>
</html>

CSS Layout

Code :

/* layout gruen css */
body { 
    background-color: #006633; 
    
}
 
#content { 
    width:900px;
    margin: 20px auto 20px auto;
}
 
#logo { 
    background-image: url(../bilder/header.jpg); 
    background-repeat:no-repeat; 
    background-position:center; 
    border: #003300; 
    border-style:inset; 
    margin-bottom:0px;
    margin-top:0px;
}   
 
h1 {
    font-family:Arial, Helvetica, sans-serif; 
    font-style:italic;
    font-size:36px;
    border:#003300; 
    border-style:inset; 
    width: 900px; 
    margin-bottom:0px; /* Abstand zur oberen Border*/
    margin-top:0px;
}
 
 
 
p { 
    font-family:Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size:12px;
    border:#003300;
    border-style:inset;
    width:900px;
    margin-bottom:0px; /* Abstand zur oberen Border*/
    margin-top:0px;
    
}
 
p,logo {    
    background-image:url(../bilder/wald.jpg); 
    background-repeat:no-repeat; 
    background-position:right; 
}

Css Navigation

Code :

/* navigation gruen css */
 
#button { 
    background-color: #339933; 
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:14px;
    border: #003300;
    border-style:inset;
    width:900px; 
    height:20px;
    margin-bottom:0px; 
    margin-top:0px; 
}
 
a { 
    text-decoration:none; 
    color:#FFFFFF; 
}
 
a:link, a:visited {
    text-decoration: underline;
    color:#FFFFFF;
}
 
a:focus {
    color: #000000;
}
 
a:hover {
    text-decoration: none; 
    
}

Vielen Dank im voraus.
Rico

Maik · 17.05.07 22:10

Hi!

Zitat von Rico Meinshausen

Wie auf den Foto zu erkennen ist, sind die links eng beieinander.

Von welchem Foto sprichst du?

Ansonsten versuch es mal mit der margin-Eigenschaft, denn die word-spacing-Eigenschaft funktioniert nur bei aufeinanderfolgenden Wörtern innerhalb eines Elements:

Code :

1	<span style="word-spacing:0.5em">Beispieltext mit Wortabstand 0.5em</span>

buddha · 17.05.07 22:20

Ja sorry habe vergessen die Fotos hochzuladen. Den Fehler mit der unterschiedlichen Schriftfarbe habe ich gefunden.

Maik · 17.05.07 22:27

Bei mir wird der Text in den beiden genannten Browsern nicht in unterschiedlichen Farben dargestellt, da, abgesehen von den Links, überhaupt keine Schriftfarbenformatierung vorgenommen wurde.

buddha · 17.05.07 22:31

Endlich die Fotos.

Die Ansicht im IE sieht ja auch nicht besonders aus im Gegensatz zum FF. Habe keinen Plan wie man ein Tabellenlayout in sauberes CSS "konvertiert"

Gruß Rico

Maik · 17.05.07 22:38

Wenn der Text nicht über das Bild am rechten Rand laufen soll, dann verringere mal die Breitenangabe für das p-Element.

Zitat von Rico Meinshausen

Habe keinen Plan wie man ein Tabellenlayout in sauberes CSS "konvertiert"

Auf den folgenden Seiten kannst du studieren, wie sich ein tabellenloses CSS-Layout erstellen lässt:

buddha · 17.05.07 22:45

Habe von 900px auf 700px geändert , da rückt alles im <p> bereich nach links.

Maik · 17.05.07 22:48

Ja und? Das ist es doch, was du willst:

Gibt es noch eine andere Möglichkeit ausser einem Zeilenumbruch den Text
vor dem Bild rechts so zu gestalten das der Text nicht über das Bild geht?

buddha · 17.05.07 22:52

Sieht dann so aus.

Maik · 17.05.07 22:57

Versuch es mal hiermit:

Code :

#text {
        font-family:Arial, Helvetica, sans-serif;
        font-style: normal;
        font-size:12px;
        border:#003300;
        border-style:inset;
        width:900px;
        margin-bottom:0px; /* Abstand zur oberen Border*/
        margin-top:0px;
        background-image:url(../bilder/wald.jpg);
        background-repeat:no-repeat;
        background-position:right;
 
}
 
#text p {
        padding-right: 200px;
}

Code :

[b]<div id="text">[/b]
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus
    ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec
    quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id
    arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec
    sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
[b]</div>[/b]

buddha · 17.05.07 23:12

Prima, hat wunderbar geklappt. Bin noch am überlegen wegen dem Linkabstand, mal schaun...

Maik · 17.05.07 23:16

Hierfür empfehle ich dir die margin-Eigenschaft, wie z.B.

Code :

a {
        text-decoration:none;
        color:#FFFFFF;
        [b]margin:0 10px;[/b] /* Aussenabstand oben/unten = 0, links/rechts = 10px */
}

buddha · 18.05.07 00:03

Die Anweisung float right sollte doch ausreichen damit das rechte Bild vom Text umflossen wird?
Gruß Rico

Maik · 18.05.07 06:36

Ich hab gerade den Eindruck, dass wir hier aneinander vorbei reden, denn dieser Punkt war doch schon geklärt, und nun ging es um den Abstand zwischen den einzelnen Links.

Mit der float:right-Eigenschaft kannst du derzeit nichts bewirken, da das rechte Bild ein Hintergrundbild und kein Grafikelement (img) ist, das auf diese Weise formatiert werden könnte.

buddha · 18.05.07 14:35

Hallo,
Auf dem Foto kann man einen Abstand zwischen der Navigationsleiste und dem Text sehen (ca.10px). Im IE wird es allerdings ohne Abstand angezeigt, das wäre in diesem Fall korrekt.

CSS Layout

Code :

body { 
    background-color: #006633; 
    
}
 
#content { 
    width:900px;
    margin: 30px auto 20px auto;
}
 
#logo { 
    background-image: url(../bilder/header.jpg); 
    background-repeat:no-repeat; 
    background-position:center; 
    border: #003300; 
    border-style:inset; border-width: thick; 
    margin-bottom:0px;
    margin-top:0px;
}
 
    
 
h1 {
    font-family:Arial, Helvetica, sans-serif; 
    color:#FFFFFF;
    font-style:italic;
    font-size:36px;
    margin-top:5px; /* Abstand zum Logo*/
}
 
#wald {
    background-image:url(../bilder/wald.jpg);
    background-repeat:no-repeat; 
    background-position: right; 
    
}
 
 
#text { 
    color:#000000;
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif; 
    font-style: normal;
    font-size:12px; 
    width:910px;
    margin-top:0px; 
    padding-bottom:10px; 
 
        
 
}
 
#text p {
    padding-right: 30px; 
    padding-left:20px;
}
 
 
#end { 
    background-color: #339933; 
    width: 910px; 
    height:20px;
    color:#000000;
}
 
/* navigation gruen css */
 
#button { 
    background-color: #339933; 
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:14px;
    width:910px; 
    height:20px;
    margin-bottom:0px; 
    
}
 
a { 
    text-decoration:none; 
    color:#FFFFFF; 
    margin:0 35px; /* Aussenabstand oben/unten = 0, links/rechts = 10px */
}
 
a:link, a:visited {
    text-decoration: underline;
    color:#FFFFFF;
}
 
a:focus {
    color: #000000;
}
 
a:hover {
    text-decoration: none; 
    
}

HTML

Code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gr&uuml;n&nbsp;mit&nbsp;CSS</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content"> <img id="logo" src="bilder/header.jpg" alt="Wasserfall" />
  <h1 align="center">Hier den Namen eintragen </h1>
  <div id="button">
    <div align="center"> <a href="index.html">Start</a>&nbsp; <a href="leistung.html">Leistung</a>&nbsp; <a href="produkte.html">Produkte</a>&nbsp; <a href="Kontakt.html">Kontakt</a>&nbsp; <a href="referenzen.html">&Uuml;ber&nbsp;uns</a>&nbsp; <a href="impressum.html">Impressum</a></div>
  </div>
  <div id="text">
    <div id="wald"> <img src="bilder/wald.jpg" alt="Wald" width="150" height="150" hspace="2" vspace="2" align="right" id="wald"/> </div>
    <p><br />
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
  <div id="end" >
    <div align="center">Test</div>
  </div>
</div>
</body>
</html>

.Gruß Rico

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JS: break; andere Möglichkeit?

word spacing

andere Möglichkeit für imagemap

str replace;andere möglichkeit

andere Möglichkeit für zeilenumbrüche?

E-Mail:

Abonnieren Abbestellen