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 26-07-2007, 13:32
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard Probleme mit <div>

Hallo zusammen,

ich wollte jetzt mal etwas mit div's anstelle von tabellen machen hab jedoch dabei ein problem bei der Positionierung der Div's.

1. Die Seite soll im Browser zentriert sein.
2. Benötige ich 5 verschiedene Divs
- oben links für ein logo
- rechts den inhalt
- unter dem logo auf der Spaltenhälte links einen Streifen
- am Ende des Streifens rechts einen Bereich fürs Menü
(so breit wie der Streifen und halb so hoch wie der Streifen)
- Einen Bereich über linken und rechten Bereich
3. Hinter den ganzen Div's soll ein Hintergrundbild liegen.

Kann mir da evtl jemand helfen ?
Danke
Angehängte Grafiken
Dateityp: jpg div.jpg (12,3 KB, 143x aufgerufen)
Mit Zitat antworten
  #2 (permalink)  
Alt 26-07-2007, 14:14
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: Probleme mit <div>

Hast du einen Ansatz?

Wenn nein - beschäftige dich erst mal selber mit den Grundlagen des Layoutens mittels CSS.


Und gewöhne dir bitte ab, (wie so viele andere Ahnungslose leider auch) von "Divs statt Tabellen" zu reden. Das ist kompletter Unfug, und führt in den allermeisten Fällen nur dazu, dass die Leute statt Tabellen zu missbrauchen dann Div-Suppen kochen, was kaum besser ist.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #3 (permalink)  
Alt 26-07-2007, 14:26
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hier mein Ansatz:

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<
head>    
<
meta http-equiv="content-type" content="text/html; charset=utf-8" />
<
title>DIV Positionierung</title>
<
style type="text/css">
#inhalt { 
          
positionrelativepadding0px
          
border1px solid #silver;
          
backgroundkhakiheight150pxwidth100px;
          
left10pxtop5px
}
#fussleiste { 
          
positionrelative;  padding0px
          
backgroundsilverheight100pxwidth50px;
          
left10pxtop:5px
}
#fussleiste2 { 
          
positionrelative;  padding0px
          
backgroundblueheight100pxwidth50px;
          
left60pxtop:-95px
}
#fussleiste3 { 
          
positionrelative;  padding0px
          
border1px solid #silver;
          
backgroundgreenheight50pxwidth100px;
          
left10pxtop:-95px
}
#navigation { 
          
positionrelativepadding0.px
          
backgroundsalmonheight300pxwidth250px
          
left110pxtop: -395px
}
    
-->    
</
style>    
</
head>    
<
body>    

<
div id="inhalt"Inhalt </div>
<
div id="fussleiste"Fusszeile </div>
<
div id="fussleiste2"Fusszeile2 </div>
<
div id="fussleiste3"Fusszeile3 </div>
<
div id="navigation"Navigation </div>

</
body>
</
html
Ich hab jetzt noch folgendes Problem damit:
1. Wie zentrier ich das ganze ?
2. Wie bekomme ich dann zentriert ein Hintergrundbild dahinter ?

Hat mir dazu jemand eine Hilfestellung ?
Mit Zitat antworten
  #4 (permalink)  
Alt 26-07-2007, 14:48
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von mgoertz
1. Wie zentrier ich das ganze ?
Pack's in einen Container, und zentriere den.

(Wundere dich dabei aber nicht darüber, dass dieser automatisch höher wird, als es die sichtbaren Positionen deiner Elemente vorzugeben scheinen - relative Positionierung behält nun mal den Platz, den das Element ohne sie eingenommen hätte, reserviert.)
Zitat:
2. Wie bekomme ich dann zentriert ein Hintergrundbild dahinter ?
Lies bei SELFHTML zum Thema Hintergrundbilder nach.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #5 (permalink)  
Alt 26-07-2007, 15:00
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

ok das mit dem Hintergrundbild muss ich über background-amge machen, klar.
wenn ich alles in den Container packe wird dieser automatisch höher, wie kann ich das vermeiden ?

Kann mir da jemand helfen ?
Mit Zitat antworten
  #6 (permalink)  
Alt 26-07-2007, 15:34
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von mgoertz
wenn ich alles in den Container packe wird dieser automatisch höher,
Sag ich doch.
Zitat:
wie kann ich das vermeiden ?
In dem du, wenn du die Auswirkungen relativer Positionierung nicht willst, keine relative Positionierung nimmst.

float und margins bieten sich eher an.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #7 (permalink)  
Alt 26-07-2007, 15:37
pekka
 PHP Master
Links : Onlinestatus : pekka ist offline
Registriert seit: Jun 2001
Ort: Köln
Beiträge: 6.608
pekka befindet sich auf einem aufstrebenden Ast
Standard

Könnte weiterhelfen:
www.yaml.de
Mit Zitat antworten
  #8 (permalink)  
Alt 26-07-2007, 17:08
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

könnte mir evtl. jemand ein beispiel geben wie es aussehen würde wenn ich auf die relative positionierung verzichten würde ?
Wäre euch sehr dankbar
Mit Zitat antworten
  #9 (permalink)  
Alt 26-07-2007, 20:11
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

ich hab es jetzt mit der absoluten possitionierung zumindest im ie hinbekommen leider nimmt der firefox das noch nicht an, kann mir jemand ne Hilfestellung geben, dass es auch im Firefox zentriert ist ?

PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<
head>    
<
meta http-equiv="content-type" content="text/html; charset=utf-8" />
<
title>DIV Positionierung</title>
<
style type="text/css">
body{
    
text-align:center;
    
vertical-alignmiddle;
    
background#c0c0c0;
}
    
    
#logo { 
          
positionabsolutepadding0px
          
height130pxwidth318px;
          
left0pxtop0px
          
text-align:left;
          
}
#leiste { 
          
positionabsolute;  padding0px
          
height470pxwidth124px;
          
left0pxtop:130px
          
text-align:left;
          
}
#menue { 
          
positionabsolute;  padding0px
          
height240pxwidth194px;
          
left124pxtop:360px
          
text-align:left;
         
}
#bild { 
          
positionabsolute;  padding0px
          
height230pxwidth320px;
          
left124pxtop:130px
          
text-align:left;
          
background:green;
}
#content { 
          
positionabsolutepadding0.px
          
height600pxwidth527px
          
color:#fff;
          
left318pxtop:0px
          
text-align:left;
       
}
#background{
                    
positionrelativepadding0px
          
background-image:url(background2.jpg); height600pxwidth845px
          
leftautotopauto
          
vertical-alignmiddle;
         

}
    
-->    
</
style>    
</
head>    
<
body>    
<
div id="background">
    <
div id="leiste"leiste </div>
    <
div id="menue"menue </div>
    <
div id="content"content </div>
    <
div id="logo"logo </div>
    <
div id="bild"bild </div>
</
div>


</
body>
</
html
Danke euch im voraus
Mit Zitat antworten
  #10 (permalink)  
Alt 26-07-2007, 22:43
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Für alles absolute Positionierung zu verwenden, ist kein guter Ansatz. Damit wirst du schnell Probleme bekommen, bei Schriftvergrößerung etc.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #11 (permalink)  
Alt 27-07-2007, 08:43
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

wie würdest du es dann machen ?
wie kann ich das ganze noch vertikal zentrieren ?
Mit Zitat antworten
  #12 (permalink)  
Alt 27-07-2007, 09:45
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Ich würde mir noch mal aufmerksam die bsiherigen Antworten durchlesen.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
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

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 22:09 Uhr.