Antworten auf deine Fragen:
Neues Thema erstellen

CSS: Menü Zentriert?

S

sandro19

Nicht mehr ganz neu hier

Morgen zusammen.

Ich übe seit Samstag wie ich mein menu . In die mitte Kriege. Hab schon über Google gesucht aber nicht fündig geworden.

Hier noch die CSS Datei
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}
a { /*-- Removes dotted outline from clicked links in FF --*/
    outline: none;
}
img {
    border:none;
}
.clearer {
    clear:both;
}
blockquote {
    background: #F2F2F2 url(http://vanation.org/dev/lib/skins/Template1/images/blockquote.png) no-repeat top left;
    border: 1px solid #D7D7D7;
    padding: 10px 10px 10px 40px;
}
/*-- Main structure for the layout --*/
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
    background: #000;

}
#background {
    background: #000 url(images/back.jpg) repeat-x top;
}
#outerWrapper {
    margin: 0 auto 0 auto;
    text-align: left;
    width: 960px;

}
#contentWrapper {
    background: #FFF url(images/page-bg2.jpg) repeat-x top;
    overflow: hidden;
    clear:left;
    border-left: 6px solid #ffff;
    border-right: 6px solid #ffff;

}
#sidebar {
    float: right;
    padding: 20px 0px 10px 0px;
    width: 250px;
}
#Content {
    margin: 0 0px 0 0;
    padding: 20px 0px 10px;
    float: left;
    width: 707px;
}
#Footer {
    border-top: solid 1px #666;
    padding: 10px 10px 0px;
    background: #000 url(http://www.rihg.net/esa_beta/lib/skins/Template1/images/page-bg3.jpg) repeat-x top;
    height: 50px;
}

/*-- Heading styles --*/
h1 {
    font: normal 26px/36px Verdana, Geneva, sans-serif;
    letter-spacing: -1px;
}
h2 {
    font: bold 20px/30px Verdana, Geneva, sans-serif;
    letter-spacing: -1px;
}
h3 {
    font: bold 17px/27px Verdana, Geneva, sans-serif;
    letter-spacing: -1px;
    color: #069;
}
h4 {
    font: bold 14px/24px Verdana, Geneva, sans-serif;
}
h5 {
    font: bold 13px/20px Verdana, Geneva, sans-serif;
    color: #069;
}
h6 {
    font: bold 12px/18px Verdana, Geneva, sans-serif;
}

/*-- Link styles --*/
a, a:link {
    color: #069;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration:underline;
}
a:visited, a:active {
    color: #000;
}
.entry a.more-link { /*-- Removes underline from more link --*/
    text-decoration:none;
}
#header a, #header a:link, #header a:active, #header a:visited {
    color: #FFF;
}
#header a:hover {
    color: #0CF;
}
#Footer a, #Footer a:link, #Footer a:active, #Footer a:visited {
    color: #CCC;
}
#Footer a:hover {
    color: #FFF;
}

/*-- Header styles --*/
#headerwrap {
    width:960px;
    padding: 0;
    float:center;
    /background: url(http://www.europesky-va.de/lib/skins/Template1/images/headerbg.png) repeat-x top;/
}
#header {
    width:960px;
    height:45px;
    float:center;
    margin:0px auto;
    /background: url(http://www.europesky-va.de/lib/skins/Template1/images/headerbg.png) no-repeat center top;/

}

.topnav { /*-- This is the RSS links in the header --*/
    width: auto;
    float:center;
    color: #000;
    text-align:right;
    font: bold normal 12px Arial, Helvetica, sans-serif;
    padding-right: 7px;

}

/* Navigation Styles */
#menu {
    width:960px;
    position:absolute;
    margin:0 auto;
    display:block;
    height:35px;
    font-size:12px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left: -480px;
    left: 50%; 
    
}
#menu ul {
    margin:0 auto;
    padding:0;
    list-style-type:none;
}
#menu ul li {
    display:block;
    margin:0 auto;
    padding:0;
}
#menu ul li a {
    display:block;
    float:left;
    color:#CCC;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}
#menu ul li a:hover {
    color:#FFFFFF;
    height:27px;
    background:transparent url(http://vanation.org/dev/lib/skins/Template1/images/nav_bg.png) 0px -35px no-repeat;
}

#navwrap {
    height:0px;
    background: transparent url(http://www.rihg.net/esa_beta/lib/skins/Template1/images/nav_bg.png) repeat-x top center;
    clear: both;
}

*-- Post styles --*/
.posttitle {
    font-size: 24px;
    font-weight: normal;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 5px;
}
.posttitle a:hover {
    text-decoration:none;
}

#navwrap {
    height:35px;
    background: transparent url(http://www.rihg.net/esa_beta/lib/skins/Template1/images/nav_bg.png) repeat-x top center;
    clear: both;
}
/
/*-- Sidebar styles --*/
#sidebar h5 { /*-- This is the title of each widget --*/
    background: url(http://rihg.net/esa_dev/lib/skins/Template1/images/sidebarh3.jpg) no-repeat top center;
    font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFF;
    padding-left: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 8px;
}
#sidebar ul {
    padding: 8px;
    margin-bottom: 10px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#sidebar ul ul {
    border:none;
    background:none;
}
#sidebar ul li {
    border: 1px solid #CCC;
    background: #FFF url(http://rihg.net/esa_dev/lib/skins/Template1/images/boxbg.png) repeat-x top;
    margin-bottom:10px;
    padding: 7px;
}
#sidebar ul li ul li {
    margin-left: 8px;
    background: url(http://rihg.net/esa_dev/lib/skins/Template1/images/arrow.png) no-repeat left top;
    padding-left: 9px;
    padding-bottom: 5px;
    border:none;
    margin-bottom:0;
    padding-top: 0px;
}
#sidebar ul.children {
    padding-top:3px;
}
#sidebar ul.children li { /*-- This styles the sub categories in the hierarchy --*/
    background: url(http://rihg.net/esa_dev/lib/skins/Template1/images/childbullets.png) no-repeat left top;
    padding-bottom:2px;
}

.box {
    background: #FFF;
    padding: 20px;
    border: 1px solid #CCC;
    margin-bottom: 10px;
}

.right {
    float: right;
    margin-bottom: 10px;
    margin-left: 10px;
}
.left {
    float: left;
    margin-right: 20px;
    margin-bottom: 5px;
}

#slider ul, #slider li {
    margin:0;
    padding:0;
    list-style:none;
}
#slider li {
    width:655px;
    height:244px;
    overflow:hidden;
}

Hoffe es kann mir jemand helfen.

Gruess sandro
​
 

ans316

ans316

Nicht mehr ganz neu hier

AW: CSS: Menü Zentriert?

Morgen,

gib doch deinem div menu ne breite in px (em) und margin: 0 auto;

gruß
 
M

mens0r

Guest

AW: CSS: Menü Zentriert?

Hey,

ansonsten ist hier noch ein Beispiel, wie's funktioniert - auch im IE!
 
dnai85

dnai85

Aktives Mitglied

AW: CSS: Menü Zentriert?

noch ein kleiner tipp am rande:

anstatt oben

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

schreibe doch einfach
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

dies gilt dann für alle html-elemente.
du kannst dann aber in den einzelnen elemente diese sachen abändern, wenn du nichts änderst gelten die standartwerte von * die du oben angelegt hast.
gruß dnai
 
H

hubspe

display:schwarzgelb;

AW: CSS: Menü Zentriert?

mens0r schrieb:
Hey,

ansonsten ist hier noch ein Beispiel, wie's funktioniert - auch im IE!
Zum Vergrößern anklicken....

sorry, aber das ist ja wohl der Abschuss.

Der IE7 kennt kein inline-block. Da braucht es einen Workaround den der Autor des Tuts verschwiegen hat.

Bei der inline-.Variante hat man nicht so viel Kontrolle über die Darstellung. Die Float-Variante ist da besser geeignet. ;)
 
S

slowprojects

Noch nicht viel geschrieben

AW: CSS: Menü Zentriert?

Hi.

Ich hätte hier eine Möglichkeit DIV zu zentrieren.
Die DIV Box bleibt immer in der Mitte. Egal welche Größe das Browser Fenster hat. Funktioniert mit IE, Google Chrome, Firefox :)

<html>
<head>
<title>Mittig</title>
<style type="text/css">
body
{
margin: 20px;
}

#container
{
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
Das Feld ist schööön mittig :)
</div>
</body>
</html>

Ich hoffe es hilft :D

Lg slow
 
M

mens0r

Guest

AW: CSS: Menü Zentriert?

hubspe schrieb:
sorry, aber das ist ja wohl der Abschuss.

Der IE7 kennt kein inline-block. Da braucht es einen Workaround den der Autor des Tuts verschwiegen hat.
Zum Vergrößern anklicken....

Weiß nicht, wo dein Problem ist, im IE7 funktioniert's bei mir wunderbar!

Außerdem ist das display:inline-block; auf dem a nur ein Zusatz, es funktioniert auch wenn man nur bei dem li auf display:inline; stellt!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 93 (Mitglieder: 3, Gäste: 90)
Robots: 912

Statistik des Forums

Themen
118.620
Beiträge
1.538.374
Mitglieder
67.544
Neuestes Mitglied
janusbarman
Oben