Suche im Forum:
Suchen


Autor Nachricht
Beitrag17.02.2012 um 20:44 (UTC)    
Titel: Design CSS : Navi-Link drehen (rotate)

Wie bringe ich jetzt die Navigation in meine farbigen Kästchen?
Die Schrift muss dann 90 Grad gedreht sein?
Wie bringe ich das hin??

Lg
Mediamatiker


Zuletzt bearbeitet von mediamatiker-work am 18.02.2012, 07:45, insgesamt einmal bearbeitet
Beitrag18.02.2012 um 06:15 (UTC)    
Titel:

Hallo,

vorweg müsstest du einige Darstellungs-Fehler im Design beheben Wink

Position der Baukastenwerbung
Du hast die Werbung extrem weit nach Rechts verschoben. Weil sie deine Grafik überdecken würde ?
Die Werbung muss natürlich über dem Design sitzen, sonst wird die Seite gelöscht.
Lösung: Die Lücke für die Werbung muss schon auf der Grafik selbst vorhanden sein.
Also Logo und Navi-Felder müssten ca. 130 Pixel tiefer auf dem Bild beginnen.


kurze Info zum Design-Container ( #container )
- das Design CSS hat im Quellcode das <div id="container"> </div>
- es hat als Inhalt alle Felder des Designs (Header,Navi,Box,Seiteninhalt,Counter, u.s.w.)
- dieses DIV sollten wir maximal 980 Pixel breit machen
- Besucher mit 1024 er Bildschirmauflösung sehen nur 1000 Pixel in der Breite
- wir lassen ihnen noch 20 Pixel Luft / Abstand, um etwas vom Hintergrundbild zu sehen
- das DIV wird mit margin: auto; mittig platziert
- und alle anderen Felder innerhalb dieses DIV müssen wir nur noch mit margin ausrichten

Problem mit der Hintergrundgrafik
- entweder die Grafik so breit , wie das Design, dann bekäme #container die Hintergrundgrafik
- oder wenn übergroße Grafik, dann bekommt sie body , mit dem background-size (zum anpassen an alle Bildschirmauflösungen)
- siehe auch : http://www.homepage-baukasten.de/forum/viewtopic.php?t=135046


Folgende CSS-Codes müsstest Du anpassen :
- body { ... bekommt nun Hintergrundgrafik sowie das background-size für Anpassung an alle Bildschirmauflösungen
- der #container ist nun 980 Pixel breit und wurde mittig platziert
- die Navigation #nav_container wurde nur mit margin-left nach Rechts verschoben
- #content_container ebenfalls 980 Pixel breit
- Breite für Seiteninhalt ebenfalls angepasst
- Werbung nur mit margin:auto; mittig platziert

- alle Felder haben einen Rahmen bekommen mit border , damit du ihre Position siehst
- alle Rahmen (border) kannst du wieder entfernen

- passe in deinem CSS Code die hier gelisteten so an, wie sie hier stehen:

Zitat:


body {
background: url(http://img.webme.com/pic/m/mediamatiker-work/beautiful2.0.jpg) no-repeat center 120px;
background-color: #101010;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
color: #343434;
font-family: arial;
font-size: 12px;
}


/* Werbung mittig */
table[height="102"] {margin: auto;}


/* Design CSS Container */
#container {
width: 980px;
margin: auto;
min-height: 700px;
overflow: hidden;
border:1px solid #c9c9c9;
}


/* Feld der Navigation */
#nav_container {
width: 470px;
height: 200px;
margin-top: 20px;
margin-left: 420px;
overflow:hidden;
}


/* Feld der Navi-Links */
li.nav_element {
float: left;
margin-right: 16px;
width: 88px;
}


/* Feld um Content und Box */
#content_container {
width: 980px;
border:1px solid #c9c9c9;
overflow: hidden;
}


/* Seiteninhalt */
#content {
width: 600px;
float: left;
margin-bottom: 30px;
margin-left: 180px;
overflow: hidden;
border: 1px solid #c9c9c9;
}


/* rechte Box */
#sidebar_container {
float: right;
width: 63px;
margin-right: 30px;
overflow: hidden;
}



Die Links in der Navigation drehen

Du hattest das komplette Feld der Navigation gedreht (#nav_container)
Die Navi-Links wäre im CSS Code die Zeile mit li.nav_element a .
Beachte aber, das die Browser IE6 - IE8 keine Drehung darstellen können Wink

Ich denke das half dir weiter.

Gruß Wolle


Zuletzt bearbeitet von find-templates am 18.02.2012, 07:44, insgesamt 3-mal bearbeitet
Beitrag18.02.2012 um 11:43 (UTC)    
Titel:

Joa vielen Dank.
Einige Sachen haben mir echt richtig geholfen.
Nur habe ich jetzt ein Problem:

Schau mal selber auf meine Seite http://mediamatiker-work.de.tl/

Das ganze sieht total komisch und falsch aus.
Zudem möchte ich, dass sich mein Hintergrundbild GANZ OBEN befindet.
Zentriert aber ganz oben.

Lg
Mediamatiker
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de