Willkommen in der Webstatt
User-1 am 20.01.07 16:40

Hallo...
folgendes: Ich möchte 2 Linien im Header Bereichhaben, wo die obere dünner ist und die untere dicker. Sie sollten nicht zu weit außeinander liegen. Ich habe jetzt schon das Problem das es in verschiedenen Browsern verschieden angezeigt wird :( vllt. findet ihr eine bessere Lösung?! bzw wo liegt das Problem.


Verm.

netcup.de Warum gibt es hier Werbung?
User-2 am 20.01.07 16:48

Hast du globale Definitionen auf einen Einheitswert gesetzt ?

* {
padding: 0;
margin: 0;
border: 0;
}


siehe dazu auch: XHTML Fibel

Ich hätte mir dafür wahrscheinlich eine Grafik angefertigt oder direkt ein <div></div> mit border-top und border-bottom gestylt

mfg Alex

User-3 am 20.01.07 18:09

wie dazu ein <div> benützen? Die <hr /> Linie ist doch schemantisch perfekt?! Der Sinn oder die Bedeutung der Linie ist doch das horizontale Trennen von inhalten und in diesem Fall mehr als adäquat.

User-2 am 20.01.07 18:32

Du siehst ja was ihm das für Probleme in den verschiedenen Browsern bereitet und das er den Fehler nicht nachvollziehen kann...

sicherlich wäre es nicht unbedingt schön aber ich würde auch glaube ich nie in die Situation kommen solche zwei Linien zu basteln... also vergesst den letzten Satz oben :D

User-1 am 21.01.07 13:48

Hab die Globaleneinheiten da eingefügt wird trozdem noch falsch angezeigt! :(


Verm.

User-4 am 21.01.07 14:00

der ie 7 kann nicht mit linienabständen umgehen. in opera9 uf ff2 sieht beides gleich aus. wie wärs, wenn du nur 1 linie machst und bei dieser ne hintergrundgrafik auf der 2 linien sind einfügst?

User-5 am 21.01.07 14:21

Im IEX 6+7 sieht deine Seite gleich aus.
Was spricht denn dagegen anstelle von HR mit unterschiedlich breiten Rahmen Blocklevelelement mit einer Höhe, Hintergrundfarbe und als Abstand einem MARGIN-BOTTOM bzw MARGIN-TOP (und natürlich overflow: hidden für den IEX)?

Also so:
<!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">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div {
background: red;
overflow: hidden;
}
div#eins {
height: 1px;
margin-bottom: 5px;
}
div#zwei {
height: 5px;
}
</style>
</head>
<body>

<div id="eins"></div>
<div id="zwei"></div>

</body>
</html>


Viele Grüße,
xyz-141el

// edit

die Abstände sehen zumindest im IEx 6+7 wie im FF richtig aus

// edit 2

Natürlich kannst du anstelle von DIVs auch HRs benutzen. Allerdings verschließt sich mir der semantische Vorteil bei Trennlinien ohne Bedeutung

User-1 am 21.01.07 14:25

So hab jetzt ein Bild gemacht. Müsste ja eigentlich auch gehen aber nun kann ich das Bild nicht Vertikal anders Positionieren.



Verm.

User-5 am 21.01.07 14:28

Es hat sich doch auch gar nichts geändert, sieht im IE7 immer noch vollkommen anders aus.

// edit

sieht nur im IE7 nach einen Screenshot anders aus

User-1 am 21.01.07 14:36

Hmm musst vllt. mal die Siete neu laden! :)

User-4 am 21.01.07 14:52

ich verstehe deinen quelltext nicht ganz.
<style type="text/css">
* {
padding: 0;
margin: 0;
border: 0;
}
#line1 {
border: 1px; /* Für Firefox und Opera */
border-top: solid 1px #006600;
border-bottom: solid 2px #FFFFFF; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
margin-top: 130px;

}
#line2 {
border: 4px; /* Für Firefox und Opera */
border-top: solid 4px #006600;
border-bottom: solid 4px #FFFFFF; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
position: inherit;
}
</style>
</head>

<body style="background-image: url(line.gif); background-repeat:repeat-x; float:left; top: 130px;">
<div >
</div>


wo willst du die linien denn hin haben? warum machst du einen hintergrund für den body tag? hm..

User-5 am 21.01.07 15:08

Quote
Original von xyz-228
Hmm musst vllt. mal die Siete neu laden! :)


Tatsächlich schafft es die Seite nicht einen Screenshot der geänderten Seite zu machen.
In jedem Fall findest du in meinem Fall eine Möglichkeit die Linien darzustellen und zu positionieren. Ob du es ansiehst, ist deine Sache.

User-1 am 21.01.07 16:27

@ xyz-141le danke schon mal! Aber sobald ich es versuche zu positionieren, wird der Abstand der beiden Linien gleich viel größer! Und ganz gleich sind die Linien im IE und Ff nicht :P

Verm.

User-5 am 21.01.07 16:28

Der Abstand zwischen den Linien ist gleich. Du musst natürlich noch die Abstände von body usw anpassen. Hier macht der IE ja komische Sachen.

Ansonsten verstehe ich nicht, wie du die Linien positionieren willst. Wenn du mir das erklärst, passe ich mein Beispiel einfach an.

Viele Grüßr,
xyz-141el

User-1 am 21.01.07 16:30

Naja die Linien sollten eigentlich schon im header breich sien nur so ca. 130px nach unten verschoben!

Verm.

User-5 am 21.01.07 16:31

xyz-48n gib dem oberen noch ein margin-top: 140px;

Alternativ kannst du ein Blockelement mit position: relative um beide DIVs herumpacken und die beiden DIVs dann mit position: absolute positionieren. xyz-48n wird als Ausgang für die Koordinaten das übergeordnete DIV benutzt

User-1 am 21.01.07 16:33

Ja Perfekt so hatte ich mir das Vorgestellt :) xyz-48ke dir...

Verm.

User-1 am 21.01.07 17:05

Na klasse schon hab ich das nächste Problem! Das Logo ist im Ie wieder an einer anderen stelle... ich versteh da sirgentwie nicht!


Verm.

User-4 am 21.01.07 17:07

hast du es schon mal mit
* {
margin: 0;
padding: 0;
}

bzw

span#blid {
margin:0;
padding: 0;
}

versucht

User-1 am 21.01.07 17:32

Ja ging auch nicht...

User-6 am 21.01.07 22:35

Sieht doch genau gleich aus? Firefox/IE? (6.0.2900)

User-1 am 21.01.07 23:00

Also im FF wird es richtig angezeigt, aber im IE ist das Logo zu weit oben!

User-1 am 24.01.07 15:22

Sry für den Doppel Post, aber könnte sich vllt. noch mal jmd. meinem Problem zuwenden.

Verm.

(Link im letzten Post)

User-5 am 24.01.07 17:04

Hast du mal margin: 0px; padding: 0px; für das Bild probiert. Eventuell auch für alle Container/Links/.. darum

User-1 am 24.01.07 20:01

Also wenn ich das in den ersten container schreiben kommt ein kompletter qwirks mode raus, im 2ten passiert nichts und beim Bild selbst passiert auch nichts. Bei allen 3n zusammen kommt auch qwirks mode raus :P

Verm.

User-5 am 24.01.07 20:29

Du hast so etwas wie span,img { padding: 0px; margin: 0px; } probiert?

User-1 am 02.02.07 11:56

Ja nun hängt das ganze in der oberen linken ecke!

<!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">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div#eins {
height: 1px;
margin-bottom: 5px;
margin-top: 110px;
background: #006600;
overflow: hidden;
}
div#zwei {
height: 5px;
background: #006600;
overflow: hidden;
}
#bild {
position:absolute;
top: 20px;
left: 100px;
span,img { padding: 0px; margin: 0px;
background-repeat: no-repeat;
}
#seite {
font-family:'Times New Roman', Times, serif;
font-size:11px;
font-style:italic;
color:#000000; }
#zuhause {
font-family:'Times New Roman', Times, serif;
font-size:16px;
font-style:normal;
color:#000000;
margin-left:20px;
}
a.seite:link { text-align:right; font-style:italic; font-family:'Times New Roman', Times, serif; font-size:11px; text-decoration:none; color:#000000;}
a.seite:visited { text-align:right; font-style:italic; font-family:'Times New Roman', Times, serif; font-size:11px; text-decoration:none; color:#000000;}
a.seite:hover { color:#006600; font-style:italic; text-decoration: overline;}
a.seite:active { color:#006600; font-style:italic; }
</style>
</head>
<body>
<span id="bild"></span><a href="seite2.html"><img src="logo.gif" border="0" id="bild"></a><a href="seite2.html" class="seite">nächste Seite&raquo;</a><font id="zuhause">Ich mache aus Ihrem Haus ein zuhause...</font>
<div id="eins"></div>
<div id="zwei"></div>
<div><p><table border="0">
<tr>
<td width="262" align="center"><font style="font-family:'Times New Roman', Times, serif; font-size:20px; font-style:normal; color:#000000;">House &amp; Garden<br />
Design<br /></font>
<p style="font-family:'Times New Roman', Times, serif; font-size:16px; font-style:normal; color:#000000;">Viola Lang</p></td>
</tr>
</table></p></div>



</body>
</html>

User-1 am 04.02.07 15:56

Help me plz :(

User-5 am 04.02.07 16:03

Servus,

ich muss leider zugeben, dass ich mir nicht /mehr) sicher bin wie es denn aussehen soll. Wenn ich das weiß, kann ich auch eine Lösung posten.

Ich sehe drei Elemente, die positioniert werden müssen:
1) Den Text mit dem Link
2) Das Logo
3) Die Linien

Vielleicht kannst du dies einfach bestätigen und erklären, wie die Anordnung aussehen soll.

User-1 am 04.02.07 18:56

Soo sollte es aussehen:

User-4 am 04.02.07 20:26

aus deiner präzisen zeichnung kann ich leider nicht genz die vorgesehenen palzierungen der elemente der seite entnehmen. könntest du das eventuell anhand eines screenshots verdeutlichen? danke.

User-1 am 05.02.07 16:22

ok hier noch mal...


Verm.

User-5 am 05.02.07 16:57

Ganz häßlich, und nur als Anreiz gedacht
Im IEX sind die Abstände auch anders. Aber damit solltest du weiterkommen

<!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">
<head>
<base href="http://www.linuslang.de/files/">
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div#eins {
height: 1px;
margin-bottom: 5px;
margin-top: 0px;
background: #006600;
overflow: hidden;
}
div#zwei {
height: 5px;
background: #006600;
overflow: hidden;
}
div#header span {
display: block;
margin-top: 50px;
margin-left: 250px;
float: left;
}
div#header font {
margin-top: 100px;
float: left;
}

#seite {
font-family:'Times New Roman', Times, serif;
font-size:11px;
font-style:italic;
color:#000000; }
#zuhause {
font-family:'Times New Roman', Times, serif;
font-size:16px;
font-style:normal;
color:#000000;
margin-left:20px;
}
a.seite:link { text-align:right; font-style:italic; font-family:'Times New Roman', Times, serif; font-size:11px; text-decoration:none; color:#000000;}
a.seite:visited { text-align:right; font-style:italic; font-family:'Times New Roman', Times, serif; font-size:11px; text-decoration:none; color:#000000;}
a.seite:hover { color:#006600; font-style:italic; text-decoration: overline;}
a.seite:active { color:#006600; font-style:italic; }
</style>
</head>
<body>

<div id="header">

<span>
<a href="seite2.html"><img src="logo.gif" border="0"></a>
<a href="seite2.html" class="seite">nächste Seite&raquo;</a>
</span>

<font id="zuhause">Ich mache aus Ihrem Haus ein zuhause...</font>

<br style="clear: both;"/>

</div>

<div id="eins"></div>
<div id="zwei"></div>

<div><p><table border="0">
<tr>
<td width="262" align="center"><font style="font-family:'Times New Roman', Times, serif; font-size:20px; font-style:normal; color:#000000;">House &amp; Garden<br />
Design<br /></font>
<p style="font-family:'Times New Roman', Times, serif; font-size:16px; font-style:normal; color:#000000;">Viola Lang</p></td>
</tr>

</table></p></div>



</body>
</html>

User-1 am 05.02.07 21:27

Ja das ist schon besser, aber im Ie is das immer noch nix... :(

Verm.

User-5 am 05.02.07 23:22

Quote
Original von xyz-141el
Ganz häßlich, und nur als Anreiz gedacht
Im IEX sind die Abstände auch anders. Aber damit solltest du weiterkommen


Einfach mal ein wenig herumprobieren. Sollte ich genug Zeit finden, baue ich es noch einmal richtig, aber das wird die nächsten Tage nichts.

User-1 am 11.02.07 12:53

Ja wäre nett wenn dus nochma angucken könntest bei mir is schonw ieder alles kaputt und binw ieder bei deinem ausgang :(

Verm.

User-1 am 28.02.07 13:01

Habs nun selber geschafft... kann geclosed werden. xyz-48ke!

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt