mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Di 23.04.2024 13:12 Benutzername: Passwort: Auto-Login

Thema: CSS: Problem mit Opera und display:inline-block vom 07.04.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Problem mit Opera und display:inline-block
Seite: 1, 2  Weiter
Autor Nachricht
house baby
Threadersteller

Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: Weiblich
Verfasst Mi 07.04.2010 16:12
Titel

CSS: Problem mit Opera und display:inline-block

 Antworten mit Zitat Zum Seitenanfang
Hallöchen,

ich hoffe es gibt diesen thread noch nirgends, aber ich bin bei meiner Suche nach Antworten auf keine befriedigenden / beseitigenden Antworten gestoßen...

Ich arbeite gerade an einer Seite bla bla und so fort. Am unteren Ende der Seite ist ein Sticky Footer, in dem sich 3 Bilder (icons, die zusätzlich als Navigation dienen) und eine Reihe von Link befinden. Diese 3 Bilder und die Links sollen alle in einer Zeile stehen. Also kein Umbruch. Dieses habe ich versucht mit "display:inline-block" zu lösen - was bis auf Opera ziemlich gut klappt.

Eigentlich müsste Opera ja mit display:inline-block klar kommen, deswegen versteh ich nicht, warum er das falsch anzeigt.

In allen Browsern werden die Links rechts neben den Buttons angezeigt. Nur nicht im Opera.

Opera bricht die Zeile um oder setzt nur den ersten link hinter das rechte Bild und bricht den Rest um.

Ich poste mal den HTML / CSS Code - ich hoffe ihr findet den Fehler *zwinker*
HTML:
Code:

<div id="area_51">
   <div id="area_52">
       <div class="links"><a href="#"></a></div>
       <div class="mitte"><a href="#"></a></div>
       <div class="rechts"><a href="#"></a></div>
     
      <div class="footer-links"><a href="#">Home  |</a><a href="#">  Kontakt  |</a><a href="#">  Impressum  |</a>
      <a href="#">  Sicherheit und Datenschutz  |</a><a href="#">  AGB  |</a>
      <a href="http://www.bkedit.com/" target="_blank">  einfach losgelegt  - mit bk.EDIT, dem effektiven CMS</a>
      </div>
       
    </div>
</div>


CSS:
Code:

#area_51 {      /*Footer*/
   position:relative;
   width:100%;
   margin-top: -110px; /* negative value of footer height */
   height: 110px;
   clear:both;
   background-image:url(../00_img/srs_footer.jpg);
   background-position:center;
   background-repeat:no-repeat;
   }

#area_52 {
   position:relative;
   width:940px;
   margin:0px auto 0px auto;
   padding-top:17px;
   }

#area_52 .links {
   background-image:url(../00_img/srs_icon_links.jpg);
   background-repeat:no-repeat;
   margin-left:45px;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .links:hover {
   background-image:url(../00_img/srs_icon_links_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .mitte {
   background-image:url(../00_img/srs_icon_mitte.jpg);
   margin-left:2px;
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .mitte:hover {
   background-image:url(../00_img/srs_icon_mitte_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .rechts {
   background-image:url(../00_img/srs_icon_rechts_active.jpg);
   margin-left:2px;
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .rechts:hover {
   background-image:url(../00_img/srs_icon_rechts_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   display:inline-block;
   }
   
#area_52 .footer-links {
   font-family:Arial, Helvetica, sans-serif;
   display:inline;
   font-size:11px;
   color:#70c82f;
   margin-left:40px;
   width:100%;
   }
   
#area_52 .footer-links A {
   text-decoration:none;
   display:inline;
   }
   
#area_52 .footer-links A:hover {
   color:#94de5e;
   }


Ach ja, ich hab noch nicht geschaut die das ganze im IE aussieht - den hab ich momentan noch gar nicht installiert xD

Also danke schonmal im Voraus! *zwinker*
  View user's profile Private Nachricht senden
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.04.2010 16:48
Titel

Antworten mit Zitat Zum Seitenanfang
naja im IE brauchst das auch nicht anschauen, weil er bis IE8 afaik kein inline-block kann.

Gib den Links doch einfach display: block + hintergrundbild und lass sie dann links (oder rechts) floaten

(man sollte vlt. noch wissen welche opera version Glaskugel )
  View user's profile Private Nachricht senden
Anzeige
Anzeige
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 07.04.2010 17:12
Titel

Antworten mit Zitat Zum Seitenanfang
Der Fehler sind die Umbrüche zwischen deinen Links. Nimm die raus oder kommentiere die Zwischenräume aus.
also so:
Code:

<a [...]></a><!-- --><a [...]></a><!-- --><a [...]></a>


mehr infos dazu:

http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Zuletzt bearbeitet von sahnemuh am Mi 07.04.2010 17:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.04.2010 17:20
Titel

Antworten mit Zitat Zum Seitenanfang
sahnemuh hat geschrieben:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

*Thumbs up!* thx, warscheinlich das einzigst brauchbare was ich heute gelernt hab *ha ha*
  View user's profile Private Nachricht senden
house baby
Threadersteller

Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: Weiblich
Verfasst Do 08.04.2010 08:25
Titel

Antworten mit Zitat Zum Seitenanfang
hihi,

danke für eure schnellen antworten - ich werd heute mal weiter versuchen das problem zu lösen...

Die Opera-Version die ich hab ist die 10er. Und eigentlich kann der inline-block auch schon. Aber da ich mir die ganze sache eh nochmal im IE anschauen muss, werd ich glaub ich eine alternative zu inline-block suchen müssen... (wenn der 7er IE auch noch kein inline-block kann...)

Und was ich noch sagen wollte: da sind doch gar keine Umbrüche zwischen den links?! und auskommentieren halte ich für ne schlechte idee - ich muss das html/css für unser CMS anpassen. und ich kann mir nicht vorstellen, das so ne super idee ist. Schließlich fügt ja der Endanwender dann zum schluss die links unten ein, und das muss ja auch anders funzen... aber dennoch danke *zwinker*

also nachher gibts ne neue statusmeldung - obs funzt oder net *zwinker*
* Wo bin ich? *

Zuletzt bearbeitet von house baby am Do 08.04.2010 08:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
house baby
Threadersteller

Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: Weiblich
Verfasst Do 08.04.2010 14:45
Titel

Antworten mit Zitat Zum Seitenanfang
so.

ich sollte wohl mal den thread hier umbenennen - display:inline-block gibts jetzt nicht mehr.

Ich habe den Aufbau geändert und mir den Tip mit dem float zu Herzen genommen und umgesetzt. Zwar ist jetzt alles ziemlich verschachtelt - aber so is der Code wenigstens sauber und funktioniert.

Das einzigste was jetzt noch nicht passt ist die position der Linkzeile. Opera versetzt diese ca. 25px nach unten - im Gegensatz zu den andern Browsern. Weiß der Teufel warum. Ich hoffe so flexibel ist das Layout, dass 1% aller Internetnutzer (nämlich die Opera-Nutzer) die Links ein Ticken weiter unten sehen.

Hier der Vollständigkeit halber noch den neuen Code:
HTML:
Code:

 <div id="footer">
<div id="area_51">
   <div id="area_52">
       <div class="links"><a href="#"></a></div>
       <div class="mitte"><a href="#"></a></div>
       <div class="rechts"><a href="#"></a></div>
    </div>
   
    <div id="area_53">     
      <a href="#">Home  |</a><a href="#">  Kontakt  |</a><a href="#">  Impressum  |</a><a href="#">  Sicherheit und Datenschutz  |</a><a href="#">  AGB  |</a><a href="http://www.bkedit.com/" target="_blank">  einfach losgelegt  - mit bk.EDIT, dem effektiven CMS</a>
      </div>
</div>
</div>


CSS:
Code:
#footer {      /*Footer*/
   position:relative;
   width:100%;
   margin-top: -110px; /* negative value of footer height */
   height: 110px;
   clear:both;
   background-image:url(../00_img/srs_footer.jpg);
   background-position:center;
   background-repeat:no-repeat;
   }

#area_51 {
   width:940px;
   margin:0px auto 0px auto;
   }

#area_52 {
   position:absolute;
   width:170px;
   margin-left:40px;
   padding-top:17px;
   float:left;
   }

#area_52 .links {
   background-image:url(../00_img/srs_icon_links.jpg);
   background-repeat:no-repeat;
   margin-left:5px;
   width:32px;
   height:31px;
   float:left;
   }
   
#area_52 .links:hover {
   background-image:url(../00_img/srs_icon_links_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   }
   
#area_52 .mitte {
   background-image:url(../00_img/srs_icon_mitte.jpg);
   margin-left:5px;
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   float:left;
   }
   
#area_52 .mitte:hover {
   background-image:url(../00_img/srs_icon_mitte_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   }
   
#area_52 .rechts {
   background-image:url(../00_img/srs_icon_rechts_active.jpg);
   margin-left:5px;
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   float:left;
   }
   
#area_52 .rechts:hover {
   background-image:url(../00_img/srs_icon_rechts_hover.jpg);
   background-repeat:no-repeat;
   width:32px;
   height:31px;
   }
   
#area_53 {
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   color:#70c82f;
   margin-right:70px;
   margin-top:30px;
   text-align:right;
   width:770px;
   float:right;
   }
   
#area_53 A {
   text-decoration:none;
   }
   
#area_53 A:hover {
   color:#94de5e;
   }


Vielen Dank nochmal für die Denkanstöße. Das Rätseln ist ja leider noch nicht vorbei - hab noch IE-Optimierung vor mir... * Nee, nee, nee *
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Do 08.04.2010 15:10
Titel

Antworten mit Zitat Zum Seitenanfang
Nur als Tip: Du kannst dein CSS noch deutlich zusammengefasster schreiben:

Code:
#footer {      /*Footer*/
   position:relative;
   width:100%;
   margin-top: -110px; /* negative value of footer height */
   height: 110px;
   clear:both;
   background:url(../00_img/srs_footer.jpg) no-repeat center center;
   }

#area_51 {
   width:940px;
   margin:0px auto;
   }

#area_52 {
   position:absolute;
   width:170px;
   margin-left:40px;
   padding-top:17px;
   float:left;
   }

#area_52 .links,
#area_52 .mitte,
#area_52 .rechts {
   margin-left:5px;
   width:32px;
   height:31px;
   float:left;
   background-repeat:no-repeat;
}
#area_52 .links {
   background-image:url(../00_img/srs_icon_links.jpg);
   }
#area_52 .links:hover {
   background-image:url(../00_img/srs_icon_links_hover.jpg);
   }
#area_52 .mitte {
   background-image:url(../00_img/srs_icon_mitte.jpg);
   }
#area_52 .mitte:hover {
   background-image:url(../00_img/srs_icon_mitte_hover.jpg);
   }
#area_52 .rechts {
   background-image:url(../00_img/srs_icon_rechts_active.jpg);
   }
#area_52 .rechts:hover {
   background-image:url(../00_img/srs_icon_rechts_hover.jpg);
   }
   
#area_53 {
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   color:#70c82f;
   margin:30px 70px 0 0;
   text-align:right;
   width:770px;
   float:right;
   }
#area_53 a {
   text-decoration:none;
   }
#area_53 a:hover {
   color:#94de5e;
   }
  View user's profile Private Nachricht senden
house baby
Threadersteller

Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: Weiblich
Verfasst Do 08.04.2010 19:26
Titel

Antworten mit Zitat Zum Seitenanfang
danke schön sahnemuh,

abkürzen von CSS hab ich auch noch nicht so richtig drauf - aber wenn man den code auf validierung testet, dann bringt der gott sei dank keine fehler.

aber vielen vielen dank *zwinker* * Ich bin unwürdig *
  View user's profile Private Nachricht senden
 
Ähnliche Themen Problem mit display:inline
[CSS] H1, display inline und margin bottom
IE6/7 und floats mit display:inline - ich verzweifele
[HTML][CSS] Margin und display: inline funzt ned
h1 - display:inline = kein margin möglich?
divs - display: block und none
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB