Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
CSS Formatierung
zurück: HTML Seite verkleinern weiter: CSS/HTML: Leere Fläche unterhalb der Tabellen Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Feedback Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
MonaLisa73
Gast


Verfasst am:
24. Jun 2012, 16:51
Rufname:

CSS Formatierung - CSS Formatierung

Nach oben
       

Hallo,

ich probiere nun schon 3 Tage an mehreren Baustellen, habe gegooglet und versucht, aber ich bekomme es einfach nicht hin.

1. Ich schaffe es nicht, den Link vertikal in den Button zu zentrieren.
2. Der DIV Container Menü soll horizontal zentriert werden.
3. Wenn ich mit der Maus über den Button gehen, funktioniert er nicht als Link, sondern erst, wenn ich direkt über der Schrift bin.

Ich habe es mit folgendem Code schon probiert:
Code:
div#menu{margin-bottom: 30px; margin-top: 10px; height: 50px; width: 1000px; vertical-align: middle; white-space: normal; line-height: 20px;}
div#leftbox{width: 200px; min-height: 400px; background-color: #99CCFF; float: left; }
div#leftmenu{width: 200px; background-color: #99CCFF; float: left; overflow: auto;}
div#componentbox{width: 800px; min-height: 400px; background-color: #6699CC; float: right;}
div#component{width: 800px; background-color: #6699CC; float: right; overflow: auto;}

/**** footerbereich ****/
div#footer{width: 1000px; height: 30px; border: 1px solid black; margin: auto;}

/*#center {width: 1000px; border: 1px solid blue; margin: 30px auto;}*/

.horizontal_menu li {height: 50px; width: 150px; display: inline; list-style-type:none; padding-right:0px; float: left;
font-family: Arial; font-size: 12pt; background-image: url(../images/button1neu.gif); background-repeat: no-repeat;
text-align: center;}

.horizontal_menu li:hover {background-image: url(../images/button2neu.gif); background-repeat: no-repeat;}
.horizontal_menu li:visited { font-weight:bold; color:#33ffff; text-decoration:none; }

a:link { font-weight:bold; color:#ffffff; text-decoration:none; }
a:hover {font-weight:bold; color:#ffffff; text-decoration:none;}
a:visited { font-weight:bold; color:#33ffff; text-decoration:none; }
Bin für jede Hilfe dankbar.
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
24. Jun 2012, 17:47
Rufname:
Wohnort: Aachen


AW: CSS Formatierung - AW: CSS Formatierung

Nach oben
       

Hallo MonaLisa73,

ohne den HTML-Code klingt es ein wenig verworren, ich versuch's aber mal:
1. das Menü-Div zentrierst du horizontal über die margin-Angaben:
Code:
div#menu {
margin: 10px auto 30px;
height: 50px;
width: 1000px;
white-space: normal;
line-height: 20px;
}
Die Werte für margin sind oben: 10px, rechts und links: automatisch (zentriert, je nach Browserfenster), unten: 30px.

2. Die Pseudo-Elemente für Anker (die mit dem Doppelpunkt davor) brauchen immer das a für Anker, also a:hover. Bei der Textformatierung hast du es schon richtig gemacht, nur bei dem Listenelement nicht.
Code:
.horizontal_menu li a:hover {
background-image: url(../images/button2neu.gif);
background-repeat: no-repeat;
}

Die erste Frage verstehen ich nicht so ganz; meinst mit Link das Hintergrundbild oder den Text? Wenn es der Text ist, versuche es doch mal mit der Angabe line-height.
Code:
a:link, a:hover { font-weight:bold; color:#ffffff; text-decoration:none; line-height: 28px;}
Da musst du ein wenig mit dem Wert rumprobieren, bis es passt.

Tipp: Elemente, die die selben CSS-Anweisungen haben, können mit einem Komma getrennt hintereinander aufgeführt werden (wie das letzte Beispiel oben). Die Pseudo-Elemente für Anker sollten in einer festen Reihenfolge aufgeführt werden, um das Überschreiben der Eigenschaften zu vermeiden. Das kann man sich ganz einfach merken: love and hate -> a:link, a:visited, a:hover und a:active.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
MonaLisa73
Gast


Verfasst am:
24. Jun 2012, 18:10
Rufname:

AW: CSS Formatierung - AW: CSS Formatierung

Nach oben
       

Danke für die schnelle Antwort.

Also, ich poste nochmal den ganzen Code der CSS und der Index.php. Ich erstelle das gerade für eine Webseite, hinter der das CMS Joomla liegt. Ich weiss nicht, ob das auch wichtig für Dich ist.
Hier die Index.php
Code:
<?php
// No direct access.
defined('_JEXEC') or die;

//JHTML::_('behavior.framework', true);
//$app = JFactory::getApplication();
?>

<?php echo '<!DOCTYPE html>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
   <jdoc:include type="head" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
      </head>
<body>
   <div id="wrapper">
      <div id="head">
         <div id="kopf"><jdoc:include type="modules" name="kopf" style="xhtml" /></div>
      </div>
      
   <div id="content">
      <div id="menu"><jdoc:include type="modules" name="menu" style="xhtml" /></div>
      <div id="leftbox"><div id="leftmenu"><jdoc:include type="modules" name="leftmenu" style="xhtml" /></div></div>
      <div id="componentbox"><div id="component"><jdoc:include type="component" style="xhtml" /></div></div>
   </div>
      
      <div id="footer"><jdoc:include type="modules" name="footer" style="xhtml" /></div>
   </div>
</body>
</html>
Und hier die CSS-Datei:
Code:
@charset "utf-8";

*   {margin: 0px auto; padding: 0 px; border: 0px;}
html   {height: 100.2%; width: 100%; background-image: url(../images/hintergrund.jpg);}
body   {background-image: url(../images/fotogrosstranzneu.gif); background-attachment:scroll; background-repeat: no-repeat; background-position: top center;}

/**** Grundgerüst ****/
div#wrapper {width: 1000px;}

/**** kopfbereich ****/
div#head {width: 1000px; height: 300px; margin: 0px auto}

div#kopf {width: 430px; height: 180px; float: right; margin-right: 40px;}

/**** contentbereich ****/
div#content {width: 1000px; min-height: 400px; overflow: auto;}

div#menu{margin: 10px auto 30px; height: 50px; width: 1000px; white-space: normal; line-height: 20px;}
div#leftbox{width: 200px; min-height: 400px; background-color: #99CCFF; float: left; }
div#leftmenu{width: 200px; background-color: #99CCFF; float: left; overflow: auto;}
div#componentbox{width: 800px; min-height: 400px; background-color: #6699CC; float: right;}
div#component{width: 800px; background-color: #6699CC; float: right; overflow: auto;}

/**** footerbereich ****/
div#footer{width: 1000px; height: 30px; border: 1px solid black; margin: auto;}

/*#center {width: 1000px; border: 1px solid blue; margin: 30px auto;}*/

.horizontal_menu li {height: 50px; width: 150px; display: inline; list-style-type:none; padding-right:0px; float: left;
font-family: Arial; font-size: 12pt; background-image: url(../images/button1neu.gif); background-repeat: no-repeat;
text-align: center;}

.horizontal_menu li:hover {background-image: url(../images/button2neu.gif); background-repeat: no-repeat;}
.horizontal_menu li:visited { font-weight:bold; color:#33ffff; text-decoration:none; }

a:link { font-weight:bold; color:#ffffff; text-decoration:none; }
a:hover {font-weight:bold; color:#ffffff; text-decoration:none;}
a:visited { font-weight:bold; color:#33ffff; text-decoration:none; }
Ich habe deine Antwort zur zweiten Frage schon eingebaut, aber es funktioniert leider nicht.

Zur ersten Frage:
Ich habe einen Button der ist 50px hoch (im Hintergrund) und ich möchten den Link (Text der von Joomla automatisch erzeugt wird und kann auch einen Zeilenumbruch enthalten) gern vertikal darüber zentrieren. Horizontal ist er ja mit dem Text-Align schon zentriert.

Zum Tipp mit line-height. Das habe ich gerade probiert. Das Problem ist beim Text mit Zeilenumbruch verschiebt sich die zweite Zeile unter den Button.

Entschuldigung, das das CSS allein verworren ist, aber ich bin Anfänger und habe in Foren gelesen und dann Schnipselweise ausprobiert. Aber mit den 3 Fragen bin ich einfach nicht weitergekommen.

Danke für die Hilfe im Voraus.

Razz Razz Razz
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
24. Jun 2012, 20:57
Rufname:
Wohnort: Aachen

AW: CSS Formatierung - AW: CSS Formatierung

Nach oben
       

UiiUiiUii, in Joomla rumwurschteln ist aber schon was mit Doppelsternchen. Wink Der HTML-Code hilft nicht wirklich, da alle entscheidenen Passagen mit einem include reingeladen werden, somit hier nicht vorhanden sind.

Da es sich hier um ein (nicht gerade kleines) CMS handelt, ist es schwierig, ohne es gesehen (und getestet) zu haben, Lösungen vorzuschlagen. Also, das mit dem line-height geht natürlich nicht, wenn ein Zeilenumbruch vorhanden ist - ist klar. Um den Text dann zu zentrieren, müsste im HTML in jedem Listenelement entsprechende und individuelle padding-Angaben gemacht werden. Damit verlierst du die Flexibilität des CMS. Da wüsste ich als Alternative erstmal nichts, außer für jeden Menüpunkt einen aussagekräftigen, einzeiligen Text zu finden.

Zu der zweiten Frage (das Zentrieren des Menüs) könntest du probieren das CSS komplett ausschreiben:
Code:
div#menu{margin: 10px auto 30px auto; height: 50px; width: 1000px; white-space: normal; line-height: 20px;}
Also margin: 10px auto 30px auto;. Obwohl ich nicht sicher bin, ob es dann besser funktioniert - aber ein Versuch ist es wert. Ohne die inkludierten Passagen ist es ein Rätselraten, wie welche Elemente miteinander verknüpft sind und wo CSS-Angaben übergeordneter Elemente Einfluss nehmen.

Wenn du den Firefox hast, kannst du dir das PlugIn FireBug runterladen und installieren. Mit diesem PlugIn bekommst du den HTML-Code und die entsprechenden CSS-Angaben angezeigt, die du temporär im PlugIn auch verändern kannst. Damit kann man schon mal Anweisungen austesten, ohne in den echten Quellcode zu gehen. Der Chrome hat so etwas ähnliches bereits integriert, ich persönlich finde es aber nicht so komfortabel wie den FireBug. Ich arbeite grundsätzlich mit dem Firebug, wenn ich einen CMS Änderungen vornehmen muss. Das wäre noch mal mein Tipp zur Arbeitsumgebung.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
MonaLisa73
Gast


Verfasst am:
24. Jun 2012, 21:08
Rufname:


AW: CSS Formatierung - AW: CSS Formatierung

Nach oben
       

Danke für die wieder sehr schnelle Antwort.

Ja, Joomla ist schon toll. Ist aber meine erste Seite damit. Habe vor Jahren schon mal mit HTML und CSS eine Seite gebaut, aber auch mehr gegoogelt und probiert als gewusst.

Ok, Danke für den Tip mit FireBug, werde ich gleich mal installieren und probieren.

Vielen Dank vorerst und einen schönen Abend noch!

Gruß MonaLisa73
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge PHP & JavaScript Forum: PHP Textdatei mit css Formatierung ausgeben 2 Gast 474 08. Jul 2013, 17:52
Gast PHP Textdatei mit css Formatierung ausgeben
Keine neuen Beiträge HTML & CSS Forum: CSS wird in Chrome nicht angezeigt (aber im IE) 8 8SAP 1085 19. Feb 2013, 15:09
8SAP CSS wird in Chrome nicht angezeigt (aber im IE)
Keine neuen Beiträge HTML & CSS Forum: Bilder ausrichten mit CSS 3 Voeman 1685 09. Jul 2012, 22:39
Larata Bilder ausrichten mit CSS
Keine neuen Beiträge HTML & CSS Forum: Umstieg: Frames -> CSS 2 muhmaff 1167 11. Jun 2012, 18:40
muhmaff Umstieg: Frames -> CSS
Keine neuen Beiträge Frontpage Forum: Lightbox CSS .lb-dataContainer bg 2 kesart 2171 28. Mai 2012, 10:39
kesart Lightbox CSS .lb-dataContainer bg
Keine neuen Beiträge HTML & CSS Forum: CSS Problem mit Wrapper 1 dibuslaa 1274 29. März 2012, 10:47
womaninweb CSS Problem mit Wrapper
Keine neuen Beiträge HTML & CSS Forum: CSS/HTML5 Sound bei Mouseover 12 Eberh@rd 3493 15. März 2012, 19:27
Eberh@rd CSS/HTML5 Sound bei Mouseover
Keine neuen Beiträge HTML & CSS Forum: CSS urheberrechtlich schützbar? 2 HermanZ 1813 01. Feb 2011, 11:59
HermanZ CSS urheberrechtlich schützbar?
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2444 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge HTML & CSS Forum: wie zentriere ich die komplette webseite mit css??? 2 Linkifan 1735 03. Dez 2010, 11:56
Gast wie zentriere ich die komplette webseite mit css???
Keine neuen Beiträge HTML & CSS Forum: css Standartbreite 80% aber min 600px 1 Gast 2355 30. Apr 2010, 12:47
womaninweb css Standartbreite 80% aber min 600px
Keine neuen Beiträge MS Expression Web Forum: Formatieren ohne CSS 5 schreibi 3887 01. Apr 2010, 09:49
Gast Formatieren ohne CSS
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML Editor Forum