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 Thema bewerten
  #1 (permalink)  
Alt 06-03-2007, 09:49
st@tic
 Registrierter Benutzer
Links : Onlinestatus : st@tic ist offline
Registriert seit: Mar 2004
Beiträge: 344
st@tic ist zur Zeit noch ein unbeschriebenes Blatt
Standard [CSS] Hilfe bei Layout mit CSS

hi,
bis jetzt habe ich immer unsichtbare Layouttabellen verwendet, aber bevor ihr jetzt Steine nach mir werft. Ich möchte Besserung geloben.
Daher probiere ich gerade mit CSS rum um das gewünscht Layout zu erstellen.

http://www.imagebanana.com/img/2mc0mmoe/layout_css.PNG

es soll ein header mit logo oder ähnlichem geben
links sollen zwei (oder drei) boxen sein für menü und infoanzeigen
der größte teil schließlich der content

und ganz unten der footer, welcher wieder von ganz links bis ganz rechts geht.

zudem sollen auch ein paar pixel abstände zwischen den einzelnen boxen sein.
habe mich auch schon bisschen dran probiert, aber irgendwie verhaspel ich mich da zu sehr.

könnte mir zufällig jemand helfen indem er mir ganz kurz nen stylesheet und die div-boxen in ne html datei schreibt?
Mit Zitat antworten
  #2 (permalink)  
Alt 06-03-2007, 10:00
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Guckst du hier Ist ja nicht mehr als ein normales zweispaltiges Layout.
1 div im Textfluss für header
1 div float left für die beiden Container links
1 div für den content
1 div für den footer

Gruss

tobi
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #3 (permalink)  
Alt 06-03-2007, 10:27
st@tic
 Registrierter Benutzer
Links : Onlinestatus : st@tic ist offline
Registriert seit: Mar 2004
Beiträge: 344
st@tic ist zur Zeit noch ein unbeschriebenes Blatt
Standard

ich hab schon bisschen rumprobiert und die seite kenn ich und hab ich auch durchstöbert.

problem ist

beide div container mit float left funktioniert nicht richtig. diese werden im Firefox nebeneinander dargestellt. wenn ich diese beiden dinge dann nochmal extra in ne divbox reinstopfe, dann gehts aber die abstände klappen nicht ganz.
Mit Zitat antworten
  #4 (permalink)  
Alt 06-03-2007, 10:31
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.736
Kropff befindet sich auf einem aufstrebenden Ast
Standard

vielleicht helfen dir meine tutorials weiter

gruß
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 06-03-2007, 10:41
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
beide div container mit float left funktioniert nicht richtig
Nur ein div mit float left und darin zwei normalo divs.

Gruss

tobi
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #6 (permalink)  
Alt 06-03-2007, 11:13
st@tic
 Registrierter Benutzer
Links : Onlinestatus : st@tic ist offline
Registriert seit: Mar 2004
Beiträge: 344
st@tic ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Original geschrieben von jahlives
Nur ein div mit float left und darin zwei normalo divs.

Gruss

tobi
schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden, mit float: right is es garnet sichtbar und im ie hängt es unter den boxen.

für jemand, der sich bisschen mit css auskennt dürfte das doch keine schwierigkeit sein und eine beispiel html + stylesheet zu machen. solangsam hab ich nämlich alle erdenklichen kombinationen durchgeraten.
Mit Zitat antworten
  #7 (permalink)  
Alt 06-03-2007, 11:17
jahlives
 Master
Links : Onlinestatus : jahlives ist offline
Registriert seit: Jun 2004
Ort: Hooker in Kernel
Beiträge: 8.279
jahlives ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden,
Dann machst du was falsch !
Code:
<html>
<head>
<style type="text/css">
.header {
 background-color:blue;
}
.link_cont {
float:left;
width:200px;
}
.content {
text-align:left;
}
</style>
</head>
<body>
<div class="header">
Und ich bin noch viel viel mehr Text im Header
</div>
<div class="link_cont">
<div style="background-color:red;">
Sämtliche Beispiele unterliegen dem Copyright. Sie dürfen aber zum Gestalten eigener Webseiten ohne 

Quellnachweisangabe kopiert und weiterverwendet werden. Außerdem ist zu beachten, dass die 

verschiedenen, horizontal angeordneten Container nicht gleich groß sind. Das sieht aufgrunde der 

Hintergrundfarbe des Elements in dem die Elemente "gebettet" sind nur so aus.
</div>
<div style="background-color:green;">
Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig 

komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus 

bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare 

Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien 

geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man 

von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro 

Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese 

Kostenersparnis durchaus rechnen.
</div>
</div>
<div class="content">
Warum keine Tabelle?
Obwohl Tabellen nie zum Layouten von Seiten vorgesehen waren, wurden und werden sie meistens 

verwendet. Die Gründe liegen auf der Hand: Unerfahrene Webdesigner können mit einem WYSIWYG-Editor 

sehr schnell ein Design entwickeln. Mit CSS und div-Container ist das ohne Kenntnisse der Materie 

etwas problematischer. Weiterhin unterstützen erst die modernen Browser der letzten 1-2 Jahre CSS 

soweit, dass sich ein Umstieg lohnt. Da viele Seiten im Web noch nicht überarbeitet sind, finden 

sich auch noch viele Seiten, die mit Tabellen layoutet wurden. Dabei ist ein Umstieg mittlerweile 

durchaus lohnenswert. 
Stichwort "Aufgeblähter Quellcode"
Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig 

komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus 

bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare 

Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien 

geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man 

von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro 

Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese 

Kostenersparnis durchaus rechnen. 
Unterschiedliche Ausgabemedien
Die Zahl der unterschiedlichen Ausgabemedien steigt. Ob Bildschirm, Drucker, PDA, Handy, Beamer, 

Textbrowser oder Sprachausgabe, eine Webseite kann von allen Medien angezeigt, bzw. ausgedruckt 

werden. Und mit tabellenlosem Layout hast du die Möglichkeit, das Layout an die unterschiedlichen 

Ausgabemedien optimal anzupassen. 
Private Homepages
Die oben genannten Argumente treffen sicherlich nicht alle auf private Homepages zu. Auf der 

anderen Seite steht hier der Spaß am Schreiben der Webseite im Vordergrund. Also solltest du doch 

an diesem Thema interessiert sein und etwas tiefer einsteigen, oder? 
Beispiele
Die folgenden Beispiele zeigen dir unterschiedliche Layouts mit den entsprechenden 

Erläuterungen.Sie sind alle validiert nach XHTML 1.0 Strict und funktionieren mit den folgenden 

Browsern: 
Internet Explorer (Win/Mac) ab der Version 5 
Netscape ab der Version 6 
Opera ab der Version 5 
Mozilla ab der Version 1 
Firefox ab der Version 0.8 
</div>
</body>
</html>
Gruss

tobi
__________________
Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."
Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
Mit Zitat antworten
  #8 (permalink)  
Alt 06-03-2007, 11:39
st@tic
 Registrierter Benutzer
Links : Onlinestatus : st@tic ist offline
Registriert seit: Mar 2004
Beiträge: 344
st@tic ist zur Zeit noch ein unbeschriebenes Blatt
Standard

danke bringt mich auf jeden fall mal ein ganzes stück weiter.
nur wie krieg ich zwischen den beiden boxen links und der contentbox nen abstand hin? hab bei content margin-left: 10px angegeben aber bewegt sich kein stück.

hab noch ne kleine frage

und zwar wäre es sinnvoll und sauber wenn ich das ganze layout quasi in drei "hauptboxen", welche untereinander sind, aufteile und in diesen boxen quasi erst die spalten für links mitte und ggf rechts mache?
Mit Zitat antworten
  #9 (permalink)  
Alt 06-03-2007, 11:58
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.736
Kropff befindet sich auf einem aufstrebenden Ast
Standard

margin-left: breite der linken boxen + 10px
verpaß deinen content mal ein background-color oder border, dann siehst du es

gruß
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #10 (permalink)  
Alt 06-03-2007, 12:29
st@tic
 Registrierter Benutzer
Links : Onlinestatus : st@tic ist offline
Registriert seit: Mar 2004
Beiträge: 344
st@tic ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Original geschrieben von Kropff
[B]margin-left: breite der linken boxen + 10px
das wars...
danke

als designer kann man mich wirklich in die tonne treten
Mit Zitat antworten
Antwort

Lesezeichen


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

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

Die RIGID-FLEX-Technologie
Die RIGID-FLEX-TechnologieDie sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.

06.12.2018 | Berni

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


 

Aktuelle PHP Scripte

Newsmanager

Der Newsmanager ist ein Newssystem und Newsletter in einem. Mit WYSIWYG Editor und E-Mail import aus einer bestehenden MySql Datenbank sowie dynamische Kategorien / Themen Filter.

11.09.2019 Stephan_1972 | Kategorie: PHP/ News
Modelmanager

Der Modelmanager ist ein Webtool für Fotografen, kann als komplette Homepage oder als Webtool installiert werden.

11.09.2019 Stephan_1972 | Kategorie: PHP/ Webservice
ContentLion - Open Source CMS ansehen ContentLion - Open Source CMS

ContentLion ist ein in PHP geschriebenes CMS, bei dem man Seiten, Einstellungen usw. in Ordnern lagern kann

22.08.2019 stevieswebsite2 | Kategorie: PHP/ CMS
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 00:50 Uhr.