08.11.2009, 20: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;
es geht um die Leisten oben, ich bekomme den Text von "Metallbau, Schreinerei,Ladenbau" nicht nebeneinander, könntet Ihr mir da helfen? Danke Carsten 
|
| Sponsored Links |
|
08.11.2009, 21: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.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
|
08.11.2009, 22: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> grüße Carsten
|
|
08.11.2009, 22: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
|
|
10.11.2009, 15: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
|
|
10.11.2009, 20: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> Das span bekommt dann ein padding-right und gut ist. Ändere bitte dein Onlinebeispiel damit wir deine Maßnahmen nachvollziehen können 
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
10.11.2009, 22: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;
}
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;
}
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
|
|
10.11.2009, 22: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 */
}
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
11.11.2009, 00: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%;
}
|
| Sponsored Links |
|
11.11.2009, 00: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 { }
Code:
ul li { }
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.
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Float:right fehler im IE6 | gertnaster | CSS | 9 | 04.01.2011 21:59 |
| Wachsende Container | Andy CD | CSS | 13 | 10.02.2010 13:08 |
| gibt es eine andere Lösung ohne Tabelle? | online | CSS | 16 | 24.04.2009 08:41 |
| DIV bis GANZ unten | burnZ | CSS | 5 | 27.07.2008 13:14 |
| CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 25.08.2006 23:04 |
Linear-Darstellung
