mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 19:20 Benutzername: Passwort: Auto-Login

Thema: CSS floaten nach oben! Möglich? vom 27.10.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS floaten nach oben! Möglich?
Autor Nachricht
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Fr 27.10.2006 09:52
Titel

CSS floaten nach oben! Möglich?

Antworten mit Zitat Zum Seitenanfang

Lächel Hallo liebe MG´s.

Hier die Problemstellung!




Wenn die Schriftgröße des Browsers vergrößert wird schrumpt der Div! Daher weniger Platz für die Icons. Diese sollen dann nach oben einen Umbruch machen und sich an der linken Seite orientiern.

Ich weiß nicht ob das geht und hab da greade keine Idee. Das ganze ist ein Design welches von MG´s FR Print am Photoshop erstellt wurde. Die können ja auch nix für, aber die ganze Site die ich hier umsetzen soll war bisher ziemlich am Zicken wenn´s um die html/css Umsetzung ging.

Hat jemand eine Idee oder weiß jemand dass so etwas OHNE den Einsatz von Javascript nicht machbar ist? Danke im Vorraus.


Zuletzt bearbeitet von mtk am Fr 27.10.2006 09:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 27.10.2006 10:06
Titel

Re: CSS floaten nach oben! Möglich?

Antworten mit Zitat Zum Seitenanfang

mtk hat geschrieben:
Wenn die Schriftgröße des Browsers vergrößert wird schrumpt der Div! Daher weniger Platz für die Icons. Diese sollen dann nach oben einen Umbruch machen und sich an der linken Seite orientiern.


Ich versteh es nicht. Wieso verkleinert sich irgendwas wenn die Schriftgröße erhöht wird?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 30
Geschlecht: Männlich
Verfasst Fr 27.10.2006 10:12
Titel

Antworten mit Zitat Zum Seitenanfang

* Ja, ja, ja... * Berechtigte Frage!

Also muss ich doch weiter ausholen! Das Problem ist dass der Div Absolute positioniert ist und eine feste Höhe hat. Die Breite ergibt sich aus einem kleinen Trick den ich verwenden musste. Momentan 13em.

Die Ganze Site ist in 2 Hauptcontainer geteilt. Und die Icons rutschen beim Vergrößern der Schrift in den 2. Container.

Hm...ich such mal die passende Code-Stelle:


html, container 1
Code:
<div id="container_1">
         
         <!--Dient als Träger für das Logo-->
         <div id="head">
         </div>
         
         <div id="breadcrumb"><a id="not_tele" name="notfallnummern" href="#">Notfallnummern</a>
         Home&gt;&Uuml;ber das Klinikum&gt;Kompetenzzentrum&gt;Universit&auml;ts Brustzentrum  2 3 4 5 6 7 8 888 </div>      
            
         <div id="functions">
            <ul>
               <li><a href="#" id="textgroeße" name="textgroeße">Textgr&ouml;ße</a></li>
               <li><a href="#" id="fragen" name="fragen">Fragen</a></li>
               <li><a href="#" id="mail" name="mail">Mail Kontakt</a></li>
               <li><a href="#" id="sitemap" name="sitemap">Sitemap</a></li>
               <li><a href="#" id="sprache" name="sprache">Sprache</a></li>
            </ul>      
         </div>
         
         
         <div class="clearer"></div>
</div>





css, container 1
Code:
/*******************************************************************************
      functions-box mit den Funktions-Buttons, angeordnet als liste
*********************************************************************************/

div#functions
{
position:absolute ;right:0; top:0;
height:95px;
padding:0;
}

div#functions ul
{
display:block;
width:13em; height:30px;
position:absolute;
bottom:0; right:0;
list-style:none;
padding:0; margin:0;
overflow:hidden;
}

div#functions li
{
display:block;
float:left;
/*margin-top:5px;*/
}

div#functions a
{
float:left;
text-indent:-99999px;
/*margin-left:15px; */
}

/*Hintergrundgrafiken für die Buttons*/
div#functions a#textgroeße
{
background:url(../pics/text_size.gif) no-repeat; width:45px; height:22px;
}

div#functions a#fragen
{
background:url(../pics/fragezeichen.gif) no-repeat; width:45px; height:22px;
}

div#functions a#mail
{
background:url(../pics/brief.gif) no-repeat; width:45px; height:22px;
}

div#functions a#sitemap
{
background:url(../pics/sitemap.gif) no-repeat; width:45px; height:22px;
}

div#functions a#sprache
{
background:url(../pics/flagge.gif) no-repeat; width:45px; height:22px;
}
  View user's profile Private Nachricht senden
haselnusstafel

Dabei seit: 27.06.2006
Ort: -
Alter: 49
Geschlecht: Weiblich
Verfasst Fr 27.10.2006 16:09
Titel

Antworten mit Zitat Zum Seitenanfang

also der div schrumpft nicht, der bleibt genau wie er ist.

Wo ist das Problem bei wachsenden Schriftgrößen die Container einfach mitwachsen zu lassen? Ds Web ist flexibel. Eine Seite ist unendlich lang.

Das ist ein enormer Vorteil gegenüber den Printsachen. Lächel


Zuletzt bearbeitet von haselnusstafel am Fr 27.10.2006 16:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
blindalley

Dabei seit: 08.11.2004
Ort: Hamburg
Alter: 37
Geschlecht: Weiblich
Verfasst Fr 27.10.2006 18:15
Titel

Antworten mit Zitat Zum Seitenanfang

Also theoretisch waechst beim Vergroessern der Schriftgreosse ja das DIV zumindest in die Breite, eben durch die relative Groessenangabe.

Amtlicherseits loesst man Navigationselemente zwar wie du in Listen, aber solltest du die Schriftgroessen auch relativ gesetzt haben, werden die li´s vermutlich davon beeinflusst.

Versuch evtl mal die ul und li zu entfernen und mach es einfach ueber #functions img {float:left}
Dafuer musst du natuerlich im Quelltext die Bilder zwischen die A-Tags einfuegen.


nAdDel ; )
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 27.10.2006 18:45
Titel

Antworten mit Zitat Zum Seitenanfang

blindalley hat geschrieben:
Versuch evtl mal die ul und li zu entfernen und mach es einfach ueber #functions img {float:left}
Dafuer musst du natuerlich im Quelltext die Bilder zwischen die A-Tags einfuegen.


Wofür dann bitte floaten?


Und das eigentliche Problem ist mir immer noch nicht so ganz klar. Wenn du nicht möchtest dass dein Layout beim verändern der Schriftgröße zerhauen wird, musst du eben relative Maßeinheiten wie z.B. "em" nutzen und auf "px" Angaben komplett verzichten.


Zuletzt bearbeitet von m am Fr 27.10.2006 18:46, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Boxen untereinander floaten
[css] div floaten - warum klappts nicht?
[CSS] ungewollte Umbrüche beim floaten
css möglich
[CSS]Mindesthöhe bei Listen möglich?
Treeview nur mit CSS möglich?
Neues Thema eröffnen   Neue Antwort erstellen
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.