schräg gestellte Links

moon-walker · #1 (**permalink**) 12.05.2012, 14:10

Hallo Community,

Ich muß eine Menge Links horizontal unterbringen. Damit die auch in einem kleinen Browserfenster Platz haben, möchte ich sie schräg stellen.
Dazu habe ich im Web dieses Beispiel gefunden und angepasst.

Tryit Editor v1.5

Wenn ich nun den Code auf der linken Seite hiermir ersetze

PHP-Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

#div1

    {

   position: relative;

   height: 200px;   

   margin-top: 20px;

   padding:  70px 20px;

   border: 3px dotted blue;

   }



.div2

{

    padding:5px;

    position: relative;  

    float: left; 

    /*  display: inline-block; */  

    margin-right: 10px;      

    border: 2px solid black;

    background-color: red;

    

    -ms-transform: rotate(-30deg); /* IE 9 */

    -ms-transform-origin: left bottom; /* IE 9 */



    -webkit-transform: rotate(-30deg); /* Safari and Chrome */

    -webkit-transform-origin:  left bottom;



    -moz-transform: rotate(-30deg);; /* Firefox */

    -moz-transform-origin: left bottom; /* Firefox */



    -o-transform: rotate(-30deg); /* Opera */

    -o-transform-origin: left bottom; /* Opera */



    transform: rotate(-30deg); 

    transform-origin:  left bottom;

}

</style>

</head>



<body>



<div id="div1">



   <div class="div2">Home</div>



   <div class="div2">Pressemitteilungen</div>



   <div class="div2">Kontakt</div>



   <div class="div2">Dienstleistungen</div>



</div>



</body>

</html>

und dann den Button "Edit and Click me" drücke, stehen alle Links schräg nebeneinander. Es gelingt mir jedoch nicht, ihnen einen gleich großen Abstand zu geben.

Könnt ihr bitte helfen?

Gruß,
moonwalker

take_a_7 · #2 (**permalink**) 12.05.2012, 14:44

Moin,

Code:

transform-origin: top center;

gruß,
take

moon-walker · #3 (**permalink**) 12.05.2012, 14:52

Zitat:

Zitat von take_a_7

Moin,

Code:

transform-origin: top center;

gruß,
take

Das habe ich auch schon probiert. Dabei stehen die Links aber nicht mehr auf einer Linie.

trotzdem danke.

Als letzte Möglichkeit müßte ich wohl jeden Link absolut positionieren und feste Koordinaten geben. Das möchte ich aber vermeiden, da nicht gerade wartungsfreundlich.

Habt ihr noch eine Idee?

gato · #4 (**permalink**) 12.05.2012, 15:04

Zitat:

Zitat von moon-walker

Habt ihr noch eine Idee?

Allen Listenpunkten die selbe Breite geben.

(#div1 will ein ul-Element sein, .div2 wollen li-Elemente sein, Transitional will lieber Strict sein)

moon-walker · #5 (**permalink**) 12.05.2012, 15:13

Zitat:

Zitat von gato

Allen Listenpunkten die selbe Breite geben.

Oh wie peinlich, daß ich da nicht von selbst drauf gekommen bin. Danke, gato.

Mit einem zusätzlichen negativen margin-right für die Links passt jetzt alles.

Zitat:

Zitat von gato

(#div1 will ein ul-Element sein, .div2 wollen li-Elemente sein, Transitional will lieber Strict sein)

wird gemacht!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.	Picasso	CSS	36	03.01.2011 19:41
Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden	makalus	CSS	7	03.11.2010 09:36
komische Verschiebung - wo liegt das Problem?	Muckel	(X)HTML	5	03.01.2009 17:26
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20
Probleme mit 3 spalten	luk	CSS	3	08.06.2005 14:39