XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Text nebeinander? (http://xhtmlforum.de/showthread.php?t=59118)

carstiee09 08.11.2009 21:33

CSS Text nebeinander?
 
Hallo Leute,

habe eine Frage zum CSS Text.

ich habe in meinem Code folgendes stehen:

Code:

.menu {
        height: auto;
        width: 118px;
        background-color: #F4F4F4;
        padding-left:600px;
        float:right;
        text-align:center;

der Link der Seite ist Metall-Ladenbau

es geht um die Leisten oben, ich bekomme den Text von "Metallbau, Schreinerei,Ladenbau" nicht nebeneinander, könntet Ihr mir da helfen?


Danke
Carsten

andir 08.11.2009 22:05

Du hast alle Links in ein li gepackt. Dein Code gibt genau das wieder wie es angezeigt wird. Packe die Links jeweils in ein eigenes Listenelement und lasse die Listenelemente dieser ul-klasse links floaten.

Damit sollte es so aussehen wie von Dir gewünscht.

carstiee09 08.11.2009 23:08

hi, danke für die antwort,

mein code für die elmente schaut so aus:

Code:

<ul class="menu_liste">
<li><a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=50">Metallbau</a> <a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=52">Schreinerei</a> <a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=51">Ladenbau</a></li>
</ul>
</div>

wie meinst du das genau mit dem Listenenlement?

grüße
Carsten

hafo 08.11.2009 23:58

<li><a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=50">M etallbau</a></li>


<li><a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=52">S chreinerei</a> </li>


<li><a href="http://metall-ladenbau.com/index.php?option=com_content&view=article&id=51">L adenbau</a></li>


lg
Karin

carstiee09 10.11.2009 16:22

Hallo Karin,

danke für deine antw. es funktionert mit dem "li" ansich ganz gut. nur habe ich jetzt ein problem in der css, da die anderen menüs komplett über die ul, li laufen d.h. er zerschießt mir das komplette theme.

wie könnte ich das anders lösen?

Danke
Carsten

andir 10.11.2009 21:52

Seufz.

Dein Onlinebeispiel hat nichts von den Vorschlägen umgesetzt.

ul bekommt: float: right;
ul li bekommt float: left;

Und bitte mach aus L adenbau
Code:

<li><a><span>L</span>adenbau</a></li>
Warum? Sowas sieht im Print ziemlich bescheuert aus ( es gibt eine Menge von Leuten die sich "das Internet" ausdrucken) und bildet eine Barriere für schlecht Sehende, die sich die Seite vorlesen lassen.
Das span bekommt dann ein padding-right und gut ist.
Ändere bitte dein Onlinebeispiel damit wir deine Maßnahmen nachvollziehen können :)

carstiee09 10.11.2009 23:04

Hallo Andir,

dein Tipp hat leider nicht funktioniert.

meine css schaut so aus

Code:

ul {
        padding: 0 0 0 2px;
        margin: 0;
        margin-left: 1px;
        list-style: none;
       
}
ul li {
        border-bottom: 1px solid #F1F1F1;
        padding-left: 0;
        line-height: 170%;
        padding: 5px 0;

}

wenn ich jetzt diesen code einfüge

Code:

ul, li {
        margin: 0;
        padding: 0;
        list-style:none;
        font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
        font-size: 12px;
        float:left;
        text-align:center;
}

zerhaut er mir das komplette theme, das untere Menü Willkommen uzw. ist dann alles vertikal. dies will ich jedoch vermeiden. nur das obere soll vertikal bleiben.

ich habe das original script von dieser seite jCargoo | Technology & Programming: 7 Vertical Menus With jQuery Effects
es in meine index.php eingebaut.

gruß
Carsten

andir 10.11.2009 23:48

Du hast etwas mißverstanden.
ul bekommt float right.
Die li's bekommen float: left.

Die Verwendung von Dir: ul, li.... bedeutet, dass ALLE ul's und li's diese Anweisungen bekommen. Schau mal hier:

Etwa so:

Code:

ul.menu_liste {
float: right;
/* und dein ganzer rest */
}
ul.menu_liste li {
float: left;
/* und dein ganzer rest */
}
div#mainwrap {
clear: both;
/* und dein ganzer rest */
}

Das sollte im Prinzip funktionieren.

carstiee09 11.11.2009 01:00

sorry aber ich raff grad gar nix mehr!!!

hier ist meine komplette css

Code:

/

html,
body,
div,
span,
applet,
object,
iframe,
caption,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
        vertical-align: baseline;
        font-size: 100%;
        outline: 0;
        padding: 0;
        margin: 0;
        border: 0;
}
/* remember to define focus styles! */

:focus {
        outline: 0;
}
body {
        background: white;
        line-height: 1;
        color: black;
}
ol,
ul {
        list-style: none;
}
/* tables still need cellspacing="0" in the markup */

table {
        border-collapse: separate;
        border-spacing: 0;
}
caption,
th,
td {
        font-weight: normal;
        text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */

blockquote:before,
blockquote:after,
q:before,
q:after {
        content: "";
}
blockquote,
q {
        quotes: "" "";
}
/* ||| the end |||*/
/* ||| set of clearing floats |||*/       

.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
.clearfix {
        display: inline-block;
}
.clr {
        font-size : 1px;
}
/* Hides from IE-mac \*/

* html .clearfix {
        height: 1%;
}
.clearfix {
        display: block;
}
.clear {
        clear: both;
}
/* End hide from IE-mac */
/* ||| the end |||*/

html {
        height: 100%;
        margin-bottom: 1px;
}
body {
        margin: 0;
        padding: 0;
        font-size:100%;
}
#bg {
        background: #F4F4F4 url('../images/.png') repeat-x;
        font: normal 11px Verdana, Arial, Helvetica, sans-serif;
        line-height:1.6;
        color: #8a8a8a;
}
a {
        outline: none;
        cursor: pointer;
}
img {
        border: none;
        text-decoration: none;
}
a:link,
a:visited,
a:active {
        text-decoration: none;
}
a:hover {
        text-decoration: underline;
}
ul {
        padding: 0 0 0 2px;
        margin: 0;
        margin-left: 1px;
        list-style: none;
       
}
ul li {
        border-bottom: 1px solid #F1F1F1;
        padding-left: 0;
        line-height: 170%;
        padding: 5px 0;

}
ul li a {
        text-decoration: none!important;
}
ul li a:hover {
        text-decoration: underline!important;
}
ol li {
        line-height: 170%;
}
fieldset {
        border: 0;
        padding: 5px 0;
}
th {
        padding: 4px;
        text-align: left;
}
h1 {
        font-size: 200%;
}
h2 {
        font-size: 175%;
}
h3 {
        font-size: 150%;
}
h4 {
        font-size: 125%;
}
h5 {
        font-size: 115%;
}
p,
pre,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
        margin: 1em 0;
        padding: 0;
}
fieldset {
        border: none;
}
fieldset a {
        font-weight: bold;
}
input,
select,
button {
        font: normal 11px Tahoma, Arial, Verdana, sans-serif;
}
hr {
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        height: 1px;
        color: #eee;
        background-color: #eee;
}
.clearfix {
        clear: both;
}
.lf {
        float: left;
}
.rf {
        float: right;
}
/* Here you can change width or height of your logo*/

a#logo {
        background: transparent url('../images/logo.png') no-repeat 0 0;
        width: 180px;
        height: 51px;
        display: block;
        overflow: hidden;
        float: left;
}
/*end*/

/* Set the major blocks
--------------------------------------------------------------------------------*/

div#memberarea,
div#top_wrap,
div#main_wrap,
div#footer_wrap,
div#banner_wrap,
div#main_wrap_bottom,
div#main_wrap_top {
        width: 900px;
        margin: 0 auto;
        clear: both;
}
div#top_wrap {
        height: 51px;
}
div#banner_wrap {
        margin-top: 16px;
}
div#main_wrap {
        background: url('../images/bg_content_middle.png') repeat-y 50% 50%;
        margin-top: 25px;
}
div#main_wrap_top {
        background: url('../images/bg_content_top.png') no-repeat 50% 0;
        padding-top: 80px;
}
div#main_wrap_bottom {
        background: url('../images/bg_content_bottom.png') no-repeat 50% 100%;
        padding-bottom: 9px;
}
div#header_wrap {
        font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}
div#header_content {
        background: url('../images/bg_header.png') 0 0;
}
div#horiz-menu {
        float: right;
        width: auto;
}
div#content {
        padding: 0 9px;
}
div#header {
        float:left;
        overflow: hidden;
}
div#advert2 {
        float:right;
        overflow: hidden;
}
/* Members Area
------------------------------------------------------------------------*/

div#memberarea {
        background: transparent url('../images/bg_login_area.png') no-repeat 0 0;
        height: 33px;
}
div#memberarea_right {
        width: auto;
        float: right;
}
div#memberarea_left {
        width: auto;
        float: left;
}
div#memberarea a {
        color: #666;
}
ul.loginposition {
        padding: 0;
        margin: 0;
}
ul.loginposition li {
        float: left;
        background: none;
        padding: 3px 0 0 14px;
        line-height: 27px;
        border: none;
}
#memberarea input.inputbox {
        color: #CCC;
        width: 127px;
        height: 18px;
        border: none;
        padding-left: 15px;
        padding-top: 2px;
}
#modlgn_username {
        background: transparent url('../images/input_login_nick.png') no-repeat 0 0;
}
#modlgn_passwd {
        background: transparent url('../images/input_login_password.png') no-repeat 0 0;
}
.search {
        float: right;
        margin: 0px 0 0 10px;
}
input#mod_search_searchword {
        background: url('../images/input_login_search.png') no-repeat 0 0;
        margin-top: 8px;
        border: none;
        padding-left: 5px !important;
        padding-right: 15px;
}
#memberarea input.button {
        background: transparent url('../images/button_top.png') repeat-x;
        float: left;
        height: 22px;
        width: 61px;
        margin-top: 3px;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 18px;
        font-weight: normal;
        border: none;
}
div#memberarea_right input.button {
        float: right;
        margin-right: 15px;
        margin-left: 10px;
        margin-top: 6px;
}
div#memberarea_right input.inputbox {
        float: left;
}
#memberarea .logout span {
        float: left;
        color: #333;
        margin: 3px 15px 0 14px;
        line-height: 27px;
}
#memberarea .logout input.button {
        float: none!important;
        display: inline;
        margin-top: 6px;
}
div.logout {
        float: left;
}
div.logout input.button {
        padding: 0;
}
/* set the width of user modules */

#user_position-1,
#user_position-2,
#user_position-3,
#user_position-4 {
        width: 100%;
        overflow: hidden;
        clear: both;
}
#user_position-1 {
        background: url('../images/bg_users_tr.png') no-repeat 100% 0;
}
#user_position-11 {
        background: url('../images/bg_users_tl.png') no-repeat 0 0;
}
#user_position-4 {
        background: url('../images/bg_position_4.png') repeat-y 0 0;
}
#user_position-3 {
        background: url('../images/bg_position_3.png') repeat-y 0 0;
}
.users {
        overflow: hidden;
        float: left;
}
.us_width-24 .users {
        width: 24.8%;
}
.us_width-33 .users {
        width: 33.3%;
}
.us_width-50 .users {
        width: 50%;
}
.us_width-100 .users {
        width: 100%;
}
.us_width-49 .users {
        width: 49.5%;
}
.us_width-99 .users {
        width: 100%;
}
div.spacer {
        width: 1%;
        float: left;
        height: 1px;
}
.us-stand {
        clear: both;
        width: 100%;
}
.us-stand {
        clear: both;
        width: 100%;
}
/* component */

div#component {
        width: 100%;
}
/* component + right */

div#component-2 {
        float: right;
        width: 572px;
}
div#right {
        float: left;
        width: 301px;
}
#mainbody {
        padding: 0 10px;
}
/* Footer */

#footer_wrap {
        background: transparent url('../images/bg_footer1.png') no-repeat 0 0;
        clear: both;
        height: 80px;
        font-size: 11px;
        margin: 0 0 20px 0;
}
#footer_wrap div {
        margin: 0 9px;
        padding:9px 6px;
}
#footer_wrap div div {
        margin: 0;
        padding: 0;
}
div#footer_wrap a {
        text-decoration: none;
}
/* Moduletable
-------------------------------------------------------------------------------- */

div.module h3,
div.module_menu h3,
div.module_text h3,
div.module_grey h3,
div.module_clear h3,
div.moduletable h3 {
        margin: 0 0 9px;
        padding: 9px 5px 4px 0;
        white-space: nowrap;
        font-size: 110%;
        color: #646262;
        border-bottom:1px dotted #DEDCD4;
        font: bold 12px Arial, Helvetica, sans-serif;
}
div.moduletable {
        padding: 0 15px 15px;
        line-height: 13px;
}
div.module,
div.module_menu,
div.module_text,
div.module_grey {
        margin: 0 0 9px;
        padding: 0;
        width: 100%;
        background: url('../images/module_default/mod_rb.png') no-repeat bottom right;
}
div.module div,
div.module_menu div,
div.module_text div,
div.module_grey div {
        padding: 0;
        background: url('../images/module_default/mod_lb.png') no-repeat bottom left;
}
div.module div div,
div.module_menu div div,
div.module_text div div,
div.module_grey div div {
        padding: 0;
        background: url('../images/module_default/mod_trb.png') no-repeat top right;
}
div.module div div div,
div.module_menu div div div,
div.module_text div div div,
div.module_grey div div div {
        padding: 0 15px 15px;
        background: url('../images/module_default/mod_tlb.png') no-repeat top left;
}
div.module_clear {
        margin: 0 0 9px;
        padding: 0;
        width: 100%;
}
/* Grey module */

div.module_grey {
        background: url('../images/module_suffix_grey/mod_grey_rb.png') no-repeat bottom right;
}
div.module_grey div {
        background: url('../images/module_suffix_grey/mod_grey_lb.png') no-repeat bottom left;
}
div.module_grey div div {
        background: url('../images/module_suffix_grey/mod_grey_trb.png') no-repeat top right;
}
div.module_grey div div div {
        background: url('../images/module_suffix_grey/mod_grey_tlb.png') no-repeat top left;
}
/*Module Advertisement */

div.banneritem_text {
        padding: 5px 0!important;
        border-bottom: 1px dotted #f1f1f1;
}
.bannerheader,
.bannerfooter_text {
        padding: 3px;
        font-style:italic;
}
.bannerfooter_text {
        text-align: right;
}
/* Restriction */

div.module div div div div,
div.module_menu div div div div,
div.module_text div div div div,
div.module_grey div div div div {
        margin: 0;
        padding: 0;
        background: none;
        overflow: hidden;
}
#user_position-4 div.moduletable h3 {
        color: #fff;
        border-bottom:1px dotted #282828;
}
#user_position-4 div.moduletable {
        color: #999;
}
#user_position-3 div.moduletable h3,
#user_position-1 div.moduletable h3 {
}
#user_position-3 div.moduletable h3 span,
#user_position-1 div.moduletable h3 span {
        color: #646262;
}
/* Joomla menu */

ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
}
ul.menu li {
        background: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f1f1f1;
}
ul.menu li a {
        display: block;
        outline: none;
        padding: 5px 2px;
        color: #333;
        text-decoration:none!important;
}
ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
        color: #2978b0;
}
ul.menu li.active a {
        color: #000;
}
ul.menu li.parent a {
        background: url('../images/menu_joomla_bullet.png') no-repeat 96% center;
}
ul.menu li ul {
        list-style: none;
        margin: 0;
        padding: 0;
}
ul.menu li li {
        border-bottom: 1px solid #f1f1f1;
}
ul.menu li li:first-child {
        border-top: 1px solid #f1f1f1;
}
ul.menu li li a {
        border: none;
        font-weight: normal !important;
        padding-left: 20px !important;
}
ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
        background: none;
}
ul.menu li:last-child {
        border: none;
}
ul.menu li:last-child a {
        padding-bottom: 0;
}
ul.menu li li:last-child a {
        padding-bottom: 5px;
}
ul.menu li.parent li a {
        background: none;
}
/* Style switcher
-------------------------------------------------------------------------------*/
#links {
        width: 93%;
        float: left;
}
#stylearea {
        float: right;
        width: 7%;
}
#st_icon-1,
#st_icon-2,
#st_icon-3 {
        width: 13px;
        height: 13px;
        display: block;
        float: left;
        padding:17px 0 0 6px;
}
#st_icon-1 {
        background: transparent url('../images/ic_1.png') no-repeat 100% 50%;
}
#st_icon-2 {
        background: transparent url('../images/ic_2.png') no-repeat 100% 50%;
}
#st_icon-3 {
        background: transparent url('../images/ic_3.png') no-repeat 100% 50%;
}

komme zu keiner Lösung.

David 11.11.2009 01:25

Belies dich über die Selektoren in CSS und was diese bedeuten:
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : Selektoren }
Denn
Code:

ul, li { }
ist was ganz anderes als
Code:

ul li { }
Wo hast du dieses Stylesheet her? Das scheint mir so ein Standard-reset-designerding zu sein.

Es macht sich allgemein immer gut, wenn Du den aktuellen Stand auch im Onlinebeispiel umsetzt. Sich durch so ein großes Stylesheet zu wälzen fällt schwer. Für die Fehlersuche gibt es Tools wie Firebug, die die Diagnose am laufenden Beispiel wesentlich vereinfachen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:15 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023