Willkommen in der Webstatt Zum Webstatt Blog und Stories
Vermilion 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?
Al3x0r Al3x0r 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

der_nic der_nic 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.

Al3x0r Al3x0r 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

Vermilion am 21.01.07 13:48

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


Verm.

fish fish 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?

Michael Michael 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,
Michael

// 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

Vermilion 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.

Michael Michael 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

Vermilion am 21.01.07 14:36

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

fish fish 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..

Michael Michael am 21.01.07 15:08

Quote
Original von Vermilion
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.

Vermilion am 21.01.07 16:27

@ Michale 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.

Michael Michael 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,
Michael

Vermilion am 21.01.07 16:30

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

Verm.

Michael Michael am 21.01.07 16:31

Dann 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. Dann wird als Ausgang für die Koordinaten das übergeordnete DIV benutzt

Vermilion am 21.01.07 16:33

Ja Perfekt so hatte ich mir das Vorgestellt :) Danke dir...

Verm.

Vermilion 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.

fish fish am 21.01.07 17:07

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

bzw

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

versucht

Vermilion am 21.01.07 17:32

Ja ging auch nicht...

Wasili am 21.01.07 22:35

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

Vermilion am 21.01.07 23:00

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

Vermilion 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)

Michael Michael 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

Vermilion 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.

Michael Michael am 24.01.07 20:29

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

Vermilion 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>

Vermilion am 04.02.07 15:56

Help me plz :(

Michael Michael 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.

Vermilion am 04.02.07 18:56

Soo sollte es aussehen:

fish fish 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.

Vermilion am 05.02.07 16:22

ok hier noch mal...


Verm.

Michael Michael 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>

Vermilion am 05.02.07 21:27

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

Verm.

Michael Michael am 05.02.07 23:22

Quote
Original von Michael
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.

Vermilion 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.

Vermilion am 28.02.07 13:01

Habs nun selber geschafft... kann geclosed werden. Danke!

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

Impressum & Kontakt