php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 2 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 20-08-2009, 09:30
jbay
 Registrierter Benutzer
Links : Onlinestatus : jbay ist offline
Registriert seit: Dec 2005
Ort: Schweiz
Beiträge: 41
jbay ist zur Zeit noch ein unbeschriebenes Blatt
Standard [CSS] Layout - liquid/fixed/liquid

Hallo zusammen,

ich habe ein kleineres Problem bei welchem ich nicht weiterkomme.

Ich habe eine Webseite, die eine fixe Breite hat und zentriert ist (sagen wir mal 600px). Nun brauche ich Rechts und Links davon je eine Div, die mitwächst. Ziel ist, dass der Inhalt dieser Divs zentriert bleibt, also immer in der Mitte zwischen Ende des Mittelteils und dem Ende des Browserfensters.

Hat jemand einen Ansatz mit dem man es versuchen könnte oder geht das gar nicht mit CSS? Muss man da mit JS reinquatschen?

Bin um jede Hilfe dankbar.

Mfg

jonas
Mit Zitat antworten
  #2 (permalink)  
Alt 20-08-2009, 10:08
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Wenn sich der linke und rechte Bereich an das Browserfenster anpassen sollen, geht das imho nur mit Javascript. Oder du arbeitest bei allen drei Bereichen mit Prozentwerten.

Zitat:
Ziel ist, dass der Inhalt dieser Divs zentriert bleibt, also immer in der Mitte zwischen Ende des Mittelteils und dem Ende des Browserfensters.
kannst du mal anskizzieren?

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 20-08-2009, 15:01
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

man kann das mit CSS machen. Man kann sogar beliebig viele Spalten beliebig mischen (fixiert und prozentual) und das jeweils in horizontaler, vertikaler oder in beide Richtungen. Dafür braucht man einen Container, der um die Summe der absoluten Größenangaben zu klein ist, aber overflow: visible. Dann arbeitet man sich von links nach rechts bzw. von oben nach unten mit 2 gedachten Zählvariablen durch. Abs wird um die Größe in px inkrementiert (kein JS, von Hand im CSS!), wenn ein absoluter Block gesetzt wurde und rel um die Größe in % wenn ein relativer gesetzt wurde. Der nächste Block wird dann jeweils mit left (bzw. top): {rel}%; margin-left (bzw. -top): {abs}px gesetzt.

Gruß,

Anja

Geändert von AmicaNoctis (20-08-2009 um 15:03 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 20-08-2009, 15:15
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Und damit kommt auch der IE6 klar? Das musst du mir zeigen.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 20-08-2009, 15:29
jbay
 Registrierter Benutzer
Links : Onlinestatus : jbay ist offline
Registriert seit: Dec 2005
Ort: Schweiz
Beiträge: 41
jbay ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich habs irgendwie befürchtet.

Skizzieren, hm. Ok, das Problem ist, dass das eine bestehende Seite ist, die halt eine fixe Grösse hat und zentriert ist. Nun sollen links und Rechts Grafiken eingeblendet werden, die natürlich auch fixe Grössen haben.

Das sieht dann irgendiwe so aus:
Code:
<body>
<div id="links">
<img><img>
</div>
<div id="rechts">
<img><img>
<div id="content">
Text
</div>
</body>
Der relevante CSS-Ausschnitt:

Code:
    .twoColFixLtHdr #container { 
    	width: 800px; 
    }

    .left{
    width: 150px;
    float: left;
    margin-top:100px;
    }
    
    .right{
    width: 150px;
    float: right;
    margin-top:100px;
    }
Wenn man halt jetzt das Fenster aufzieht bleiben die Bilder am linken resp. am rechten Rand hängen, was natürlich äusserst unschön aussieht. Zentriert soll es sein, obs dann schöner ist, egal, das entscheide nicht ich.
Eine aufwändige JS-Programmierung scheue ich eigentlich, müsste nicht unbedingt sein. Evtl. muss man nochmals neue Ideen entwerfen. Aber Danke schon mal für den Input.
Mit Zitat antworten
  #6 (permalink)  
Alt 20-08-2009, 15:30
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Bei meinen Tests kam damals (mit leichten Modifikationen) auch der 5.5er damit klar. Für diese Mods war dann abernatürlich ein JS notwendig, aber das war immer nur dieses eine Skript, was man immer einbindet, wenn man diese Form der absoluten Positionierung braucht.
Mit Zitat antworten
  #7 (permalink)  
Alt 20-08-2009, 15:33
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

PHP-Code:
.twoColFixLtHdr #container { 
        
width800px
    }

    .
left{
    
width150px;
    
floatleft;
    
margin-top:100px;
    }
    
    .
right{
    
width150px;
    
floatright;
    
margin-top:100px;
    } 
Du arbeitest hier mit festen(!) Breitenangaben. Einfach ein neues Div um alle herum setzen und dem eine Breite von 1100px geben. Das war's schon.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #8 (permalink)  
Alt 20-08-2009, 15:40
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; http://webdesign.about.com/od/css/ht/htcsscenterfix.htm
Mit Zitat antworten
  #9 (permalink)  
Alt 20-08-2009, 15:42
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; CSS Centering - How to Center a Fixed Width Layout Document with CSS
Stimm, margin hab ich vergessen.
@TS
Also zusätzlich margin: 0 auto.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #10 (permalink)  
Alt 20-08-2009, 15:48
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn du in den Randbereichen zentrierte Bilder haben willst, brauchst du aber 7 Spalten:

dyn | fix:Bilder | dyn | fix:Inhalt | dyn | fix:Bilder | dyn

Ich hab mal das Tutorial hochgeladen, was ich damals geschrieben habe. Schau dir im Quelltext die Kommentare an, dann sollte das zu schaffen sein: Multi-Column-Layout

Gruß,

Anja
Mit Zitat antworten
  #11 (permalink)  
Alt 20-08-2009, 16:18
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Ich hab mal das Tutorial hochgeladen, was ich damals geschrieben habe.
Aber nicht im IE6 angucken .

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #12 (permalink)  
Alt 20-08-2009, 16:19
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Aber nicht im IE6 angucken .
Mit dem besagten JS geht es auch dort.
Mit Zitat antworten
  #13 (permalink)  
Alt 21-08-2009, 10:37
jbay
 Registrierter Benutzer
Links : Onlinestatus : jbay ist offline
Registriert seit: Dec 2005
Ort: Schweiz
Beiträge: 41
jbay ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; CSS Centering - How to Center a Fixed Width Layout Document with CSS
Da ich aber float: left resp. float:right habe geht das nicht, die Divs hängen dann einfach am linken resp. rechten Rand.

Betreffend MultiColumn-Tutorial habe ich noch Fragen.
Müssen da die relativen Werte zusammen 100% ergeben oder ist das egal?

Und wenn ich jetzt 3 absolute Divs habe mit einer Gesamtgrösse von 1150px, muss dann der Slotcontainer den Wert right: 1150px haben?
Mit Zitat antworten
  #14 (permalink)  
Alt 21-08-2009, 10:53
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Wo ist denn das Problem, wenn du mit festen Breitenangaben arbeitest?
PHP-Code:
  <div class="border">
    <
div class="left">
      
bla
    
</div>
    <
div class="middle">
      
blubb
    
</div>
    <
div class="right">
      
blubber
    
</div>
  </
div>
  ...
  
div.border {
    
width900px;
    
margin0 auto;
  }    
  
div.left {
    
width150px;
    
floatleft;
    
background#f00;
  
}
  
div.middle {
    
width600px;
    
floatleft;
    
background#ff0;
  
}
  
div.right {
    
width150px;
    
floatleft;
    
background#00f;
  

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #15 (permalink)  
Alt 21-08-2009, 12:10
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von jbay Beitrag anzeigen
Betreffend MultiColumn-Tutorial habe ich noch Fragen.
Müssen da die relativen Werte zusammen 100% ergeben oder ist das egal?
Nein, das ist nicht ganz egal, du solltest schon auf 100% kommen. Wenn das aus mathematischen Gründen nicht geht, solltest du wenigstens 99.9% anstreben. Einzige Ausnahme: das letzte Div (relativ) hätte sowieso keinen Inhalt und wäre nur ein Platzhalter bis zum Rand. Dann kannst du es natürlich im HTML und im CSS weglassen und kommst dadurch nicht auf 100%.

Zitat:
Zitat von jbay Beitrag anzeigen
Und wenn ich jetzt 3 absolute Divs habe mit einer Gesamtgrösse von 1150px, muss dann der Slotcontainer den Wert right: 1150px haben?
Exakt.
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[CSS] IES und position:fixed weko321 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 16-09-2007 18:58
position:fixed und anker mcmurphy HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 21-03-2007 13:29
[CSS] position:fixed nur horizontal mrhappiness HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 16-01-2007 12:11
[HTML] Tabelle mit table-layout:fixed Pauli76 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 1 13-08-2006 11:49
Alternative zu 'position:fixed;' ?? westberlin HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 03-11-2005 12:24

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 18:19 Uhr.