Webstatt.org - Community seit 2006 - 2012 (2024?)

2 Linien ausrichten

user-338
20.01.2007 15: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 traurig vllt. findet ihr eine bessere Lösung?! bzw wo liegt das Problem.


Verm.
Avatar user-118
20.01.2007 15: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
Ich brauche keine Signatur
Avatar user-162
20.01.2007 17: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.
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-118
20.01.2007 17: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 Fettes Grinsen
Ich brauche keine Signatur
user-338
21.01.2007 12:48
Hab die Globaleneinheiten da eingefügt wird trozdem noch falsch angezeigt! traurig


Verm.
Avatar user-180
21.01.2007 13: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?
may the force be with you. but mostly with me.
Avatar user-253
21.01.2007 13: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
user-338
21.01.2007 13:25
So hab jetzt ein Bild gemacht. Müsste ja eigentlich auch gehen aber nun kann ich das Bild nicht Vertikal anders Positionieren.



Verm.
Avatar user-253
21.01.2007 13: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-338
21.01.2007 13:36
Hmm musst vllt. mal die Siete neu laden! lächeln
Avatar user-180
21.01.2007 13: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..
may the force be with you. but mostly with me.
Avatar user-253
21.01.2007 14:08
Original von user-338
Hmm musst vllt. mal die Siete neu laden! lächeln


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-338
21.01.2007 15:27
@ user-251le 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 frech

Verm.
Avatar user-253
21.01.2007 15: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
user-338
21.01.2007 15:30
Naja die Linien sollten eigentlich schon im header breich sien nur so ca. 130px nach unten verschoben!

Verm.
Avatar user-253
21.01.2007 15: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. user-158n wird als Ausgang für die Koordinaten das übergeordnete DIV benutzt
user-338
21.01.2007 15:33
Ja Perfekt so hatte ich mir das Vorgestellt lächeln user-158ke dir...

Verm.
user-338
21.01.2007 16: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.
Avatar user-180
21.01.2007 16:07
hast du es schon mal mit
* {
margin: 0;
padding: 0;
}

bzw

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

versucht
may the force be with you. but mostly with me.
user-338
21.01.2007 16:32
Ja ging auch nicht...
user-343
21.01.2007 21:35
Sieht doch genau gleich aus? Firefox/IE? (6.0.2900)
user-338
21.01.2007 22:00
Also im FF wird es richtig angezeigt, aber im IE ist das Logo zu weit oben!
user-338
24.01.2007 14:22
Sry für den Doppel Post, aber könnte sich vllt. noch mal jmd. meinem Problem zuwenden.

Verm.

(Link im letzten Post)
Avatar user-253
24.01.2007 16:04
Hast du mal margin: 0px; padding: 0px; für das Bild probiert. Eventuell auch für alle Container/Links/.. darum
user-338
24.01.2007 19: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 frech

Verm.
Avatar user-253
24.01.2007 19:29
Du hast so etwas wie span,img { padding: 0px; margin: 0px; } probiert?
user-338
02.02.2007 10: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-338
04.02.2007 14:56
Help me plz traurig
Avatar user-253
04.02.2007 15: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-338
04.02.2007 17:56
Soo sollte es aussehen:
Avatar user-180
04.02.2007 19: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.
may the force be with you. but mostly with me.
user-338
05.02.2007 15:22
ok hier noch mal...


Verm.
Avatar user-253
05.02.2007 15: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-338
05.02.2007 20:27
Ja das ist schon besser, aber im Ie is das immer noch nix... traurig

Verm.
Avatar user-253
05.02.2007 22:22
Original von user-251el
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-338
11.02.2007 11:53
Ja wäre nett wenn dus nochma angucken könntest bei mir is schonw ieder alles kaputt und binw ieder bei deinem ausgang traurig

Verm.
user-338
28.02.2007 12:01
Habs nun selber geschafft... kann geclosed werden. user-158ke!