Schrift untereinander

stbaumann · 26 August 2016

Hallo, ich habe folgenden Quellcode:

CSS:

/* = = = = = = = = = = = = = = = = = datei menue.css - Hier sind die Men?s definiert = = = = = = = = = = = = = = = = = = = = = = = = = */


/* allgemeine links im text */

a:link, a:visited, a:active{
font-family:verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif;
font-size: 13px;line-height: 18px;
color:#003653;
text-decoration:underline;
padding-left:2px;padding-right:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}

a:hover{ text-decoration:underline;color:#fff;
background-color:#07274B;
text-decoration:none;
}





/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  menue horizontal oben */

#menu2_container {float:right;

-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 0px 8px #2F2F2F;
-moz-box-shadow:  0px 0px 8px #2F2F2F;
box-shadow:  0px 0px 8px #2F2F2F;
}

#menu2  {padding-left:14px;padding-right:14px;
background-color:#07274B;
background-image:url(images/back2.png);
background-repeat:repeat-y;
background-position:50% 50%;
float:right;
text-align:center;
border:solid 1px #000;
height:40px;
line-height:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 2px 8px #fff;
-moz-box-shadow:  0px 2px 8px #fff;
box-shadow: inset 0px 2px 8px #fff;
}


#menu2 ul, #menu2 li {display: inline;color:#2FB6FF;text-shadow: 1px 1px 0px #000;
list-style-type: none;
margin-left:0px;
padding: 0px;
margin:0px;text-align:center;

Nun möchte ich das der Text der Links untereinander steht:

@ Link
weiterer Text
so siets aus
@Link
....weiterer Text

So soll es aussehen!!!

Wie mache ich das???

Danke für die Hilfe
Gruß Steffen

djheke · 26 August 2016

Dann verzichte auf display:inline

stbaumann · 26 August 2016

Nee funktioniert nicht ist das obere Menüleiste.ich brauche aber die linke Menüleiste.
Gruß Steffen

SpiceLab · 26 August 2016

stbaumann schrieb:
Nee funktioniert nicht ist das obere Menüleiste.ich brauche aber die linke Menüleiste.

Obere Menüleiste? Linke Menüleiste?

Dann hast Du hier offensichtlich den falschen CSS-Code gezeigt.

stbaumann schrieb:
CSS:

/* menue horizontal oben */

stbaumann · 26 August 2016

Kann sein hier ist hoffentlich der ganze:

CSS:

/* = = = = = = = = = = = = = = = = = datei menue.css - Hier sind die Men?s definiert = = = = = = = = = = = = = = = = = = = = = = = = = */


/* allgemeine links im text */

a:link, a:visited, a:active{
font-family:verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif;
font-size: 13px;line-height: 18px;
color:#003653;
text-decoration:underline;
padding-left:2px;padding-right:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}

a:hover{ text-decoration:underline;color:#fff;
background-color:#07274B;
text-decoration:none;
}





/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  menue horizontal oben */

#menu2_container {float:right;

-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 0px 8px #2F2F2F;
-moz-box-shadow:  0px 0px 8px #2F2F2F;
box-shadow:  0px 0px 8px #2F2F2F;
}

#menu2  {padding-left:14px;padding-right:14px;
background-color:#07274B;
background-image:url(images/back2.png);
background-repeat:repeat-y;
background-position:50% 50%;
float:right;
text-align:center;
border:solid 1px #000;
height:40px;
line-height:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 2px 8px #fff;
-moz-box-shadow:  0px 2px 8px #fff;
box-shadow: inset 0px 2px 8px #fff;
}


#menu2 ul, #menu2 li {text-shadow: 1px 1px 0px #000;
list-style-type: none;
margin-left:0px;
padding: 0px;
margin:0px;text-align:center;
}

#menu2 li a:link, #menu2 li a:visited, #menu2 li a:active {
display: inline;

color:#EFEFEF;
text-shadow: 1px 1px 0px #000;
font-size: 14px;
padding-left: 8px;padding-right: 8px; padding-bottom: 10px; padding-top:10px;
margin-left: 0px;margin-right: 0px;
height:40px;
line-height:40px;
text-align:center;
vertical-align:middle;
text-decoration:none ;
letter-spacing:1px;
text-transform:uppercase;
}



#menu2  li a:hover {background:transparent;
background-image:url(images/pfeil.png);
background-repeat:no-repeat;
background-position:50% 100%;
color:#fff;
text-decoration:none ;

}


/* konstanter link men?1*/
#menu2 #aktuell a  {background:transparent;
background-image:url(images/pfeil2.png);
background-repeat:no-repeat;
background-position:50% 100%;
color:#fff;
text-decoration:none ;

}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  seiten-men? */

#menu3  {padding-left:0px;
}


#menu3 ul, #menu3 li {color:#fff;
list-style-type: none;
margin-left:0px;
padding: 0px;

text-align:left;
}

#menu3 li a:link, #menu3 li a:visited, #menu3 li a:active {
color:#fff;
text-shadow: 1px 1px 0px #000;
background-image:url(images/bullet1.png);
background-repeat:no-repeat;
background-position:0% 50%;
font-size: 13px;
padding-left: 26px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:20px;
line-height:20px;
text-align:left;
vertical-align:middle;
text-decoration:none ;
letter-spacing:1px;
text-transform:uppercase;
}



#menu3  li a:hover {
color:#95DAFF;
text-decoration:none ;
background:transparent;
background-image:url(images/bullet2.png);
background-repeat:no-repeat;
background-position:0% 50%;
}


/* konstanter link men?1*/
#menu3 #aktuell a  {
color:#95DAFF;
text-decoration:none ;
background:transparent;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */


/* liste im textbereich - verlinkt */
/* wenn die liste nicht verlinkt ist, dann sehen sie dazu bei -#liste- in der datei format.css */

#liste_2 ul, #liste_2 li {
list-style-type: none;
}


#liste_2 li a:link, #liste_2 li a:visited, #liste_2 li a:active{
background-image:url(images/bullet2.png);
background-repeat:no-repeat;
background-position:0% 50%;
padding-left:30px;
font-size: 13px;
line-height: 20px;
color:#003653;
}

#liste_2 li a:hover {background:transparent;
background-image:url(images/bullet1.png);
background-repeat:no-repeat;
background-position:0% 50%;
text-decoration:none;
color:#003653;
}

/* = = = = = = = = = = = = = = = = = datei menue.css - Hier sind die Men?s definiert = = = = = = = = = = = = = = = = = = = = = = = = = */


/* allgemeine links im text */

a:link, a:visited, a:active{
font-family:verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif;
font-size: 13px;line-height: 18px;
color:#003653;
text-decoration:underline;
padding-left:2px;padding-right:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}

a:hover{ text-decoration:underline;color:#fff;
background-color:#07274B;
text-decoration:none;
}





/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  menue horizontal oben */

#menu2_container {float:right;

-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 0px 8px #2F2F2F;
-moz-box-shadow:  0px 0px 8px #2F2F2F;
box-shadow:  0px 0px 8px #2F2F2F;
}

#menu2  {padding-left:14px;padding-right:14px;
background-color:#07274B;
background-image:url(images/back2.png);
background-repeat:repeat-y;
background-position:50% 50%;
float:right;
text-align:center;
border:solid 1px #000;
height:40px;
line-height:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:40px;
border-top-right-radius:40px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-webkit-box-shadow: 0px 2px 8px #fff;
-moz-box-shadow:  0px 2px 8px #fff;
box-shadow: inset 0px 2px 8px #fff;
}


#menu2 ul, #menu2 li {text-shadow: 1px 1px 0px #000;
list-style-type: none;
margin-left:0px;
padding: 0px;
margin:0px;text-align:center;
}

#menu2 li a:link, #menu2 li a:visited, #menu2 li a:active {
display: inline;

color:#EFEFEF;
text-shadow: 1px 1px 0px #000;
font-size: 14px;
padding-left: 8px;padding-right: 8px; padding-bottom: 10px; padding-top:10px;
margin-left: 0px;margin-right: 0px;
height:40px;
line-height:40px;
text-align:center;
vertical-align:middle;
text-decoration:none ;
letter-spacing:1px;
text-transform:uppercase;
}



#menu2  li a:hover {background:transparent;
background-image:url(images/pfeil.png);
background-repeat:no-repeat;
background-position:50% 100%;
color:#fff;
text-decoration:none ;

}


/* konstanter link men?1*/
#menu2 #aktuell a  {background:transparent;
background-image:url(images/pfeil2.png);
background-repeat:no-repeat;
background-position:50% 100%;
color:#fff;
text-decoration:none ;

}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*  seiten-men? */

#menu3  {padding-left:0px;
}


#menu3 ul, #menu3 li {color:#fff;
list-style-type: none;
margin-left:0px;
padding: 0px;

text-align:left;
}

#menu3 li a:link, #menu3 li a:visited, #menu3 li a:active {
color:#fff;
text-shadow: 1px 1px 0px #000;
background-image:url(images/bullet1.png);
background-repeat:no-repeat;
background-position:0% 50%;
font-size: 13px;
padding-left: 26px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:20px;
line-height:20px;
text-align:left;
vertical-align:middle;
text-decoration:none ;
letter-spacing:1px;
text-transform:uppercase;
}



#menu3  li a:hover {
color:#95DAFF;
text-decoration:none ;
background:transparent;
background-image:url(images/bullet2.png);
background-repeat:no-repeat;
background-position:0% 50%;
}


/* konstanter link men?1*/
#menu3 #aktuell a  {
color:#95DAFF;
text-decoration:none ;
background:transparent;
}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */


/* liste im textbereich - verlinkt */
/* wenn die liste nicht verlinkt ist, dann sehen sie dazu bei -#liste- in der datei format.css */

#liste_2 ul, #liste_2 li {
list-style-type: none;
}


#liste_2 li a:link, #liste_2 li a:visited, #liste_2 li a:active{
background-image:url(images/bullet2.png);
background-repeat:no-repeat;
background-position:0% 50%;
padding-left:30px;
font-size: 13px;
line-height: 20px;
color:#003653;
}

#liste_2 li a:hover {background:transparent;
background-image:url(images/bullet1.png);
background-repeat:no-repeat;
background-position:0% 50%;
text-decoration:none;
color:#003653;
}

SpiceLab · 26 August 2016

Ich finde für /* seiten-men? */ keine entsprechende Regel, die die voreingestellte vertikale Ausrichtung der Listenpunkte aufhebt, und sie nebeneinander anordnet.

Und warum existieren alle Formatierungen doppelt im CSS?

stbaumann · 26 August 2016

hab ivh keine Ahnung. ist das erste mal für mich, dass ich mit css arbeite. ich hätte ja die komplette Dateien hochgeladen geht aber nicht.

SpiceLab · 26 August 2016

Ist die Seite auf einem Webserver zugänglich? Wenn ja, dann bitte den Link posten.

Ansonsten den kompletten HTML- und CSS-Code im [code=html][/code]- u. [code=css][/code] -Tag bereitstellen (siehe meine Korrekturen Deiner Beiträge), um hier gezielter weiterhelfen zu können.

stbaumann · 26 August 2016

die Seiten liegen auf noch keinem Webserver

Format.css

CSS:

[/B][/B][/B] /* datei format.css */ /* ====== allgemein ====== */ body {margin-top:30px; margin-left: 0px; margin-right: 0px;margin-bottom: 40px; background-color: #E6E6E6;width:100%; color:#1F1F1F; font-family: verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif; } /* breite der gesamtkonstruktion */ #breite {width:1000px; background-color:#fff; padding:45px; -webkit-box-shadow:inset 0px 0px 4px #000; -moz-box-shadow:inset 0px 0px 4px #000; box-shadow: inset 0px 0px 4px #000; } .haupt {padding:15px; background-color:#fff; border:solid 1px #07274B; -webkit-box-shadow: 0px 0px 10px #2f2f2f; -moz-box-shadow: 0px 0px 10px #2f2f2f; box-shadow: 0px 0px 10px #2F2F2F; } /* ?berschriften im text */ h1, h2, h3, h4, h5, h6 { color:#2F2F2F; font-weight:normal;text-align:left; } h1{text-align:left;color:#800000; margin-bottom:30px;letter-spacing:-2px; font-size: 20px; line-height:27px; } h1 span.trenner {color:#000;font-weight:bold; } h1 span {color:#0F569A; } h2{ margin-bottom:20px;letter-spacing:-1px; font-size: 17px; line-height:22px; padding-left:0px; padding-right:0px; padding-top:2px; padding-bottom:2px; } h3{ padding-bottom:3px; margin-bottom:10px;letter-spacing:-1px; font-size: 15px; line-height:18px; } /* homepagname oben sowie adresse unten als text */ .name_container {float:right; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:80px; -moz-border-radius-bottomright:80px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:80px; -webkit-border-bottom-right-radius:80px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:80px; border-bottom-right-radius:80px; -webkit-box-shadow: 0px 0px 8px #1f1f1f; -moz-box-shadow: 0px 0px 8px #1f1f1f; box-shadow: 0px 0px 8px #1f1f1f; } .name {background-color:#800000; background-image:url(images/back3.png); background-repeat:repeat-y; background-position:50% 0%; float:right; font-family:georgia,tahoma,"trebuchet ms"; font-style:normal; font-variant:small-caps; color:#fff; border-left:solid 1px #000; border-right:solid 1px #000; border-bottom:solid 1px #000; text-shadow: 1px 1px 0px #000; padding-left:30px;padding-right:30px; padding-top:10px;padding-bottom:10px; letter-spacing :2px; text-align:center; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:80px; -moz-border-radius-bottomright:80px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:80px; -webkit-border-bottom-right-radius:80px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:80px; border-bottom-right-radius:80px; -webkit-box-shadow: inset 2px 2px 8px #fff; -moz-box-shadow: inset 2px 2px 8px #fff; box-shadow: inset 2px 2px 8px #fff; } /* listen im textbereich - wenn verlinkt, dann sehen sie dazu die liste in der datei menue.css, wenn nicht verlinkt siehe code nachstehend */ #liste li { list-style-type:upper-roman; padding-left:10px; color:#800000;font-weight:bold; } #liste li span { color:#004D75;font-weight:normal; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* ====== top - bereich ====== */ #top {width:100%; text-align:center; padding-left:0px; padding-right:0px; } #top_inhalt_container {width:100%; border:solid 6px #002940; text-align:center; background:transparent; -webkit-box-shadow:0px 0px 100px #0F5097; -moz-box-shadow:0px 0px 100px #0F5097; box-shadow:0px 0px 100px #0F5097; } #top_inhalt{height:240px;width:100%; background-color:#8bbdf3; background-image:url('(EmptyReference!)'); background-repeat:no-repeat; background-position:50% 20%; border:solid 1px #0095e6; text-align:center; vertical-align:bottom; padding-bottom:0; padding-top:0; padding-left:0; -webkit-box-shadow: inset 2px 2px 6px #1f1f1f; -moz-box-shadow: inset 2px 2px 6px #1f1f1f; box-shadow: inset 2px 2px 6px #1f1f1f; } #top_inhalt_a {text-align:center; vertical-align:top; padding-right:20px; padding-top:0px; } #top_inhalt_b {text-align:center; vertical-align:bottom; padding-right:40px; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* ====== inhaltsbereich ====== */ #content {width:100%; text-align:center; vertical-align:top; padding:0px; } .content_inhalt_container {width:100%; width:100%; text-align:center; vertical-align:top; } /* ---- inhaltspalte----- */ .inbox {height:860px;width:100%; text-align:justify; vertical-align:top; font-size: 13px; line-height: 18px; padding-left:30px; padding-right:20px; padding-top:40px; padding-bottom:70px; background:transparent; } /* ---- sidebar-spalte ----- */ .sidebar { padding-bottom:40px; padding-left:25px; } .sidebarbox1_container {width:100%; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:40px; -moz-border-radius-bottomright:40px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:40px; -webkit-border-bottom-right-radius:40px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:40px; border-bottom-right-radius:40px; -webkit-box-shadow: 0px 0px 8px #2F2F2F; -moz-box-shadow:0px 0px 8px #2F2F2F; box-shadow: 0px 0px 8px #2F2F2F; } .sidebarbox1 {width:220px; font-size:14px; line-height:16px; color:#B9E7FF; text-shadow: 1px 1px 0px #000; background-color:#07274B; background-image:url(images/back.png); background-repeat:repeat-y; background-position:50% 0%; text-align:left; vertical-align:middle; padding-left:20px;padding-right:20px; padding-top:30px;padding-bottom:30px; letter-spacing :2px; border-left:solid 1px #000; border-right:solid 1px #000; border-bottom:solid 1px #000; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:40px; -moz-border-radius-bottomright:40px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:40px; -webkit-border-bottom-right-radius:40px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:40px; border-bottom-right-radius:40px; -webkit-box-shadow: inset 0px 0px 8px #fff; -moz-box-shadow: inset 0px 0px 8px #fff; box-shadow: inset 0px 0px 8px #fff; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* ====== fussbereich ====== */ #fuss {width:100%; text-align:center; vertical-align:top; } #fuss_inhalt_container {width:100%; text-align:center; border:solid 6px #002940; -webkit-box-shadow:0px 0px 150px #0F5097; -moz-box-shadow:0px 0px 150px #0F5097; box-shadow:0px 0px 150px #0F5097; } #fuss_inhalt { width:100%; height:140px; background-image:url('(EmptyReference!)'); background-repeat:no-repeat; background-position:100% 50%; background-color:#8bbdf3; color:#fff; text-shadow: 1px 1px 0px #000; letter-spacing:3px; text-align:left; vertical-align:middle; padding: 0 40px 10px; border:solid 1px #0095e6; -webkit-box-shadow: inset 2px 2px 6px #1f1f1f; -moz-box-shadow: inset 2px 2px 6px #1f1f1f; box-shadow: inset 2px 2px 6px #1f1f1f; } #fuss_inhalt_a {text-align:center; vertical-align:top; }

Menue.css

CSS:

[/B] /* = = = = = = = = = = = = = = = = = datei menue.css - Hier sind die Men?s definiert = = = = = = = = = = = = = = = = = = = = = = = = = */ /* allgemeine links im text */ a:link, a:visited, a:active{ font-family:verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif; font-size: 13px;line-height: 18px; color:#003653; text-decoration:underline; padding-left:2px;padding-right:2px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } a:hover{ text-decoration:underline;color:#fff; background-color:#07274B; text-decoration:none; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* menue horizontal oben */ #menu2_container {float:right; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; -webkit-box-shadow: 0px 0px 8px #2F2F2F; -moz-box-shadow: 0px 0px 8px #2F2F2F; box-shadow: 0px 0px 8px #2F2F2F; } #menu2 {padding-left:14px;padding-right:14px; background-color:#07274B; background-image:url(images/back2.png); background-repeat:repeat-y; background-position:50% 50%; float:right; text-align:center; border:solid 1px #000; height:40px; line-height:40px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; -webkit-box-shadow: 0px 2px 8px #fff; -moz-box-shadow: 0px 2px 8px #fff; box-shadow: inset 0px 2px 8px #fff; } #menu2 ul, #menu2 li {display: inline;color:#2FB6FF;text-shadow: 1px 1px 0px #000; list-style-type: none; margin-left:0px; padding: 0px; margin:0px;text-align:center; } #menu2 li a:link, #menu2 li a:visited, #menu2 li a:active { display: inline; color:#EFEFEF; text-shadow: 1px 1px 0px #000; font-size: 14px; padding-left: 8px;padding-right: 8px; padding-bottom: 10px; padding-top:10px; margin-left: 0px;margin-right: 0px; height:40px; line-height:40px; text-align:center; vertical-align:middle; text-decoration:none ; letter-spacing:1px; text-transform:uppercase; } #menu2 li a:hover {background:transparent; background-image:url(images/pfeil.png); background-repeat:no-repeat; background-position:50% 100%; color:#fff; text-decoration:none ; } /* konstanter link men?1*/ #menu2 #aktuell a {background:transparent; background-image:url(images/pfeil2.png); background-repeat:no-repeat; background-position:50% 100%; color:#fff; text-decoration:none ; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* seiten-men? */ #menu3 {padding-left:0px; } #menu3 ul, #menu3 li {color:#fff; list-style-type: none; margin-left:0px; padding: 0px; text-align:left; } #menu3 li a:link, #menu3 li a:visited, #menu3 li a:active { color:#fff; text-shadow: 1px 1px 0px #000; background-image:url(images/bullet1.png); background-repeat:no-repeat; background-position:0% 50%; font-size: 13px; padding-left: 26px;padding-right: 0px; padding-bottom: 0px; padding-top:0px; margin-left: 0px;margin-right: 0px; height:20px; line-height:20px; text-align:left; vertical-align:middle; text-decoration:none ; letter-spacing:1px; text-transform:uppercase; } #menu3 li a:hover { color:#95DAFF; text-decoration:none ; background:transparent; background-image:url(images/bullet2.png); background-repeat:no-repeat; background-position:0% 50%; } /* konstanter link men?1*/ #menu3 #aktuell a { color:#95DAFF; text-decoration:none ; background:transparent; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* liste im textbereich - verlinkt */ /* wenn die liste nicht verlinkt ist, dann sehen sie dazu bei -#liste- in der datei format.css */ #liste_2 ul, #liste_2 li { list-style-type: none; } #liste_2 li a:link, #liste_2 li a:visited, #liste_2 li a:active{ background-image:url(images/bullet2.png); background-repeat:no-repeat; background-position:0% 50%; padding-left:30px; font-size: 13px; line-height: 20px; color:#003653; } #liste_2 li a:hover {background:transparent; background-image:url(images/bullet1.png); background-repeat:no-repeat; background-position:0% 50%; text-decoration:none; color:#003653; } /* = = = = = = = = = = = = = = = = = datei menue.css - Hier sind die Men?s definiert = = = = = = = = = = = = = = = = = = = = = = = = = */ /* allgemeine links im text */ a:link, a:visited, a:active{ font-family:verdana,"trebuchet ms", arial, helvetica,verdana, georgia, "times new roman", sans-serif; font-size: 13px;line-height: 18px; color:#003653; text-decoration:underline; padding-left:2px;padding-right:2px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } a:hover{ text-decoration:underline;color:#fff; background-color:#07274B; text-decoration:none; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* menue horizontal oben */ #menu2_container {float:right; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; -webkit-box-shadow: 0px 0px 8px #2F2F2F; -moz-box-shadow: 0px 0px 8px #2F2F2F; box-shadow: 0px 0px 8px #2F2F2F; } #menu2 {padding-left:14px;padding-right:14px; background-color:#07274B; background-image:url(images/back2.png); background-repeat:repeat-y; background-position:50% 50%; float:right; text-align:center; border:solid 1px #000; height:40px; line-height:40px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; -webkit-box-shadow: 0px 2px 8px #fff; -moz-box-shadow: 0px 2px 8px #fff; box-shadow: inset 0px 2px 8px #fff; } #menu2 ul, #menu2 li {display: inline;color:#2FB6FF;text-shadow: 1px 1px 0px #000; list-style-type: none; margin-left:0px; padding: 0px; margin:0px;text-align:center; } #menu2 li a:link, #menu2 li a:visited, #menu2 li a:active { display: inline; color:#EFEFEF; text-shadow: 1px 1px 0px #000; font-size: 14px; padding-left: 8px;padding-right: 8px; padding-bottom: 10px; padding-top:10px; margin-left: 0px;margin-right: 0px; height:40px; line-height:40px; text-align:center; vertical-align:middle; text-decoration:none ; letter-spacing:1px; text-transform:uppercase; } #menu2 li a:hover {background:transparent; background-image:url(images/pfeil.png); background-repeat:no-repeat; background-position:50% 100%; color:#fff; text-decoration:none ; } /* konstanter link men?1*/ #menu2 #aktuell a {background:transparent; background-image:url(images/pfeil2.png); background-repeat:no-repeat; background-position:50% 100%; color:#fff; text-decoration:none ; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* seiten-men? */ #menu3 {padding-left:0px; } #menu3 ul, #menu3 li {color:#fff; list-style-type: none; margin-left:0px; padding: 0px; text-align:left; } #menu3 li a:link, #menu3 li a:visited, #menu3 li a:active { color:#fff; text-shadow: 1px 1px 0px #000; background-image:url(images/bullet1.png); background-repeat:no-repeat; background-position:0% 50%; font-size: 13px; padding-left: 26px;padding-right: 0px; padding-bottom: 0px; padding-top:0px; margin-left: 0px;margin-right: 0px; height:20px; line-height:20px; text-align:left; vertical-align:middle; text-decoration:none ; letter-spacing:1px; text-transform:uppercase; } #menu3 li a:hover { color:#95DAFF; text-decoration:none ; background:transparent; background-image:url(images/bullet2.png); background-repeat:no-repeat; background-position:0% 50%; } /* konstanter link men?1*/ #menu3 #aktuell a { color:#95DAFF; text-decoration:none ; background:transparent; } /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* liste im textbereich - verlinkt */ /* wenn die liste nicht verlinkt ist, dann sehen sie dazu bei -#liste- in der datei format.css */ #liste_2 ul, #liste_2 li { list-style-type: none; } #liste_2 li a:link, #liste_2 li a:visited, #liste_2 li a:active{ background-image:url(images/bullet2.png); background-repeat:no-repeat; background-position:0% 50%; padding-left:30px; font-size: 13px; line-height: 20px; color:#003653; } #liste_2 li a:hover {background:transparent; background-image:url(images/bullet1.png); background-repeat:no-repeat; background-position:0% 50%; text-decoration:none; color:#003653; }

SpiceLab · 26 August 2016

Fehlt noch:

Spicelab schrieb:
den kompletten HTML-Code im [code=html][/code]-Tag bereitstellen, um hier gezielter weiterhelfen zu können.

um die Testseite zur Hand zu haben.

In Format.css ist zumindest nichts entsprechendes zu entdecken.

stbaumann · 26 August 2016

mit der html Seite kann ich nicht dienen. sie wird zu lang.

SpiceLab · 26 August 2016

stbaumann schrieb:
mit der html Seite kann ich nicht dienen. sie wird zu lang.

Dann halt nur mit dem betroffenen Menü, das falsch angezeigt wird.

stbaumann · 26 August 2016

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-wasist.php">Was ist Ergotherapie?</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-wie.php">Wie bekomme ich             eine Ergotherapie?</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-motor.php">Motorisch-Funktionell</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-Sensomotorisch - Perzeptiv.php">Sensomotorisch-Perzeptiv</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-hirn.php">Hirnleistungstraining</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                    <tr>
                                                                                                                                        <td>
                                                                                                                                            <div align="left">
                                                                                                                                                <a href="ergo-Psychisch -Funktionell.php">Psychisch-Funktionell</a></div>
                                                                                                                                        </td>
                                                                                                                                    </tr>
                                                                                                                                </table>

SpiceLab · 26 August 2016

Die Links erscheinen gemäß der Tabellengerüst-Definition untereinander

Aber zur Auszeichnung eines Menüs ist die Tabelle überhaupt nicht gedacht, sondern um tabellarische Daten aufzubereiten.

Und mit den gezeigten CSS-Formatierungen für die einzelnen Menüs gibt's da auch überhaupt keine Verbindung.

stbaumann · 26 August 2016

Ja das ist richtig, wenn ich einen Link erstelle kommt am Anfang ein Punkt. nun geht der link zur nächste Zeile dann fängt das erste Wort direkt unter den Punkt. Ich möchte aber das die Wörter alle untereinander Anfangen wie bei einer Aufzählung.

SpiceLab · 26 August 2016

stbaumann schrieb:
wenn ich einen Link erstelle kommt am Anfang ein Punkt. nun geht der link zur nächste Zeile dann fängt das erste Wort direkt unter den Punkt. Ich möchte aber das die Wörter alle untereinander Anfangen wie bei einer Aufzählung.

Dann nutze dafür auch das Listenelement:

HTML:

<ul>
  <li>Text in der ersten Zeile<br />Text in der zweiten Zeile</li>
</ul>

https://jsfiddle.net/spicelab/7nz9ceyL/

Tronjer · 26 August 2016

@Spicelab

XHTML-Notation? :(

SpiceLab · 27 August 2016

Tronjer schrieb:
@Spicelab

XHTML-Notation? :(

???

Tronjer · 27 August 2016

statt

SpiceLab · 28 August 2016

Tronjer schrieb:
 statt

Du hast recht, mit HTML5 wurde die Notation wieder auf HTML4 zurückgesetzt, was sich nicht in mein Bewußtsein eingebrannt hat. Danke für die Erinnerung :)

Doch selbst das W3C hält in seinem HTML5-Dokument an der XHTML-konformen Schreibweise fest

https://www.w3.org/wiki/HTML/Elements/br schrieb:
HTML:

<!DOCTYPE html>  

Zitatquelle des Quellcodes: https://www.w3.org/wiki/HTML/Elements/br

Aber ich gelobe an dieser Stelle Besserung

Schrift untereinander

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Neues Mitglied

Mod | ZENmechanic

Senior HTML'ler

Mod | ZENmechanic

Senior HTML'ler

Mod | ZENmechanic