zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Text nebeinander?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.11.2009, 21:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 40
carstiee09 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2009, 22:05
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2009, 23:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 40
carstiee09 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 08.11.2009, 23:58
Neuer Benutzer
neuer user
 
Registriert seit: 08.11.2009
Beiträge: 2
hafo befindet sich auf einem aufstrebenden Ast
Standard

<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
Mit Zitat antworten
  #5 (permalink)  
Alt 10.11.2009, 16:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 40
carstiee09 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 10.11.2009, 21:52
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
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
Mit Zitat antworten
  #7 (permalink)  
Alt 10.11.2009, 23:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 40
carstiee09 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 10.11.2009, 23:48
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
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
Mit Zitat antworten
  #9 (permalink)  
Alt 11.11.2009, 01:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 40
carstiee09 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.11.2009, 01:25
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.629
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

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.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Float:right fehler im IE6 gertnaster CSS 9 04.01.2011 22:59
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
gibt es eine andere Lösung ohne Tabelle? online CSS 16 24.04.2009 09:41
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:37 Uhr.