| Autor |
Nachricht |
mtk
Threadersteller
Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 37
Geschlecht: 
|
Verfasst Fr 27.10.2006 10:52
Titel CSS floaten nach oben! Möglich? |
  |
|
 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 10:54, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 27.10.2006 11:06
Titel Re: CSS floaten nach oben! Möglich? |
|
|
| 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?
|
|
| |
 |
|
|
Anzeige
|
|
|
mtk
Threadersteller
Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 37
Geschlecht:
|
Verfasst Fr 27.10.2006 11:12
Titel
|
|
|
 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>Über das Klinikum>Kompetenzzentrum>Universitä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öß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;
}
|
|
|
| |
|
|
haselnusstafel
Dabei seit: 27.06.2006
Ort: -
Alter: 57
Geschlecht: 
|
Verfasst Fr 27.10.2006 17:09
Titel
|
|
|
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.
Zuletzt bearbeitet von haselnusstafel am Fr 27.10.2006 17:10, insgesamt 1-mal bearbeitet
|
|
| |
|
|
blindalley
Dabei seit: 08.11.2004
Ort: Hamburg
Alter: 44
Geschlecht:
|
Verfasst Fr 27.10.2006 19:15
Titel
|
|
|
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 ; )
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 27.10.2006 19:45
Titel
|
|
|
| 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 19:46, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Probleme mit dem Floaten
Übereinander floaten von Div's
[CSS] Boxen untereinander floaten
[css] div floaten - warum klappts nicht?
[CSS] ungewollte Umbrüche beim floaten
div - auch nach floaten unten ausrichten
|
|
Willkommen auf dem Portal für Mediengestalter
