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 18-06-2008, 18:28
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard Design mit DIV und CSS

hi leute,

ich habe so einige Probleme mit dem Layout erstellen mittels DIV und CSS.

800 px breit -> geschafft
header und footer richtig anzeigen -> geschafft
navigation und content richtig anzeigen -> gescheitert

Code:
<div id="container" align="center">
	<div id="rahmen">
		<div id="head">header</div>
		<div id="navi">navigation</div>
		<div id="content">content</div>
		<div id="foot">footer</div>
	</div>
</div>
Code:
#container {
	text-align:left;
	width:800px;
	margin:0px auto;
}

#rahmen {
	border:1px #808080 solid;
	margin:10px,10px,10px,10px;
}

#head {
	padding:5px;
	margin-top:12px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#foot {
	padding:5px;
	margin-bottom:12px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#navi {
	width:100px;
	float:left;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#content {
	float:right;
	margin-left:120px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}
http://anime-naruto.dyndns.org/web/websites/private/

Code:
--------------------------------------------------------------------------
|                                                                                          |
|  --------------------------------------------------------------------   |
|  |           HEADER                                                            |  |
|  --------------------------------------------------------------------   |
|                                                                                          |
|  --------    ---------------------------------------------------------   |
|  | navi |   | content                                                         |  |
|  |        |   |                                                                      |  |
|  |        |   |                                                                      |  |
|  |        |   |                                                                      |  |
|  --------    ---------------------------------------------------------   |
|                                                                                          |
|  --------------------------------------------------------------------   |
|  |           footer                                                               |  |
|  --------------------------------------------------------------------   |
|                                                                                          |
--------------------------------------------------------------------------
ich würde gerne auf absolute positionen verzichten .. weiß jemand WO mein problem liegt?

habe mir auch schon andere webseiten angeguckt (auch http://www.css4you.de/ )
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #2 (permalink)  
Alt 18-06-2008, 18:36
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

schau dir mal das hier. da wird alles erklärt.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 18-06-2008, 20:59
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von Kropff
schau dir mal das hier. da wird alles erklärt.

peter
Danke Peter,
nebeneinander sind sie jetzt.
Nur wie bekomme ich jetzt die navi und den inhalt ZWISCHEN header und footer?

#navi
float:left;

#content
float:left;

beide nebeneinander

entferne ich bei navi float:left; sind sie nicht mehr nebeneinander .. ABER zwischen header und footer.

Dieses ist aktuell auf der Webseite anzusehen.
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #4 (permalink)  
Alt 18-06-2008, 21:19
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Könntest du deine neue Version bitte uppen?

..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

Edit:

float -> fließt...
Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
-> float: right / left...

und dir fehlt ganz klar ein clear:both;

mfg
Mit Zitat antworten
  #5 (permalink)  
Alt 18-06-2008, 21:40
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von Blackgreetz
Könntest du deine neue Version bitte uppen?

..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

Edit:

float -> fließt...
Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
-> float: right / left...

und dir fehlt ganz klar ein clear:both;

mfg
danke black
das clear:both in footer war das was mir die lösung brachte
uppen muss ich nichts .. ich arbeite direkt auf dem server ;-) oder besser gesagt du guckst auf meinen server der neben mir steht

jetzt habe ich nur noch das problem, das der footer direkt an den inhalt anschließt, OBWOHL in in #footer
Code:
margin-top:10px;
drinne habe

aber er bezieht das auf GANZ oben .. und nicht auf das element das über ihm ist.
ist dort was zu beachten?

Code:
#container {
	text-align:left;
	width:800px;
	margin:0px auto;
}

#rahmen {
	border:1px #808080 solid;
	background-color:#C8C8C8;
}

#head {
	width:95%;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#foot {
	clear:both;
	width:95%;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#navi {
	float:left;
	width:100px;
	margin-left:14px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}

#content {
	width:660px;
	float:left;
	margin-left:6px;
	border:1px #808080 solid;
	background-color:#E8E8E8;
}
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #6 (permalink)  
Alt 18-06-2008, 21:41
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

ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

gruß
peter

EDIT:
da war ich wohl zu langsam

zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (18-06-2008 um 21:44 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 18-06-2008, 21:49
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von Kropff
ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

gruß
peter

EDIT:
da war ich wohl zu langsam

zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.
thx ... auch wenn ich ungerne BEIDEN diese option mitgebe .. naja ... divs sind eben anders als tabellen.

wäre es möglich mir ein screen-shot vom problem aus dem ie zu senden?
debian oder suse sind dem nicht sehr zugetan
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #8 (permalink)  
Alt 19-06-2008, 09:51
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

hier ist er. obgleich mal ohne den ie6 eigentlich keine seiten entwickeln sollte.

peter
Angehängte Grafiken
Dateityp: gif ie.gif (4,5 KB, 183x aufgerufen)
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #9 (permalink)  
Alt 19-06-2008, 15:33
Abraxax
  THE REAL HAXE (Administrator)
Links : Onlinestatus : Abraxax ist offline
Registriert seit: Jul 2002
Ort: neuss.nrw.de
Beiträge: 22.623
Abraxax befindet sich auf einem aufstrebenden Ast
Standard

tipp: http://browsershots.org/ ,-)
__________________
INFO: Erst suchen, dann posten! | MANUAL(s): PHP | MySQL | HTML/JS/CSS | NICE: GNOME Do | TESTS: Gästebuch | IM: Jabber.org |


Mit Zitat antworten
  #10 (permalink)  
Alt 19-06-2008, 16:12
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von Abraxax
tipp: http://browsershots.org/ ,-)
die seite ist ja gold wert

---

thx peter
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #11 (permalink)  
Alt 24-06-2008, 14:34
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

jetzt komme ich zu einem neuen problem.

ich möchte jetzt gerne unter der navigation noch einen block einfügen.
soweit kein problem

Code:
<div id="container">

   <div id="rahmen" align="center">

      <div id="head">{header}</div>
      <div id="navi">{navi}</div>
      <div id="cert">{cert}</div>
      <div id="content"></div>
      <div id="foot">{footer}</div>

   </div>

</div>
wird der content neben cert angezeigt

Code:
<div id="container">
   <div id="rahmen" align="center">
      <div id="head">{header}</div>
      <div id="navi">{navi}</div>      		
      <div id="cert">{cert}</div>		
      <div id="content"></div>	
      <div id="foot">{footer}</div>
   </div>
</div>
wandert cert mit, sobald content länger wird.

habt ihr eine lösung für das problem?

habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #12 (permalink)  
Alt 24-06-2008, 14:40
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:
habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts
das sollte aber der richtige weg sein. wie sieht der versuch aus?

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #13 (permalink)  
Alt 24-06-2008, 14:51
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von Kropff
das sollte aber der richtige weg sein. wie sieht der versuch aus?

peter
Code:
<div id="container">
   <div id="rahmen" align="center">
      <div id="head">{header}</div>
      <div>
         <div id="navi">{navi}</div>      		
         <div id="cert">{cert}</div>		
      </div>
      <div id="content"></div>	
      <div id="foot">{footer}</div>
   </div>
</div>
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #14 (permalink)  
Alt 24-06-2008, 14:54
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

funkt jetzt

aus #navi und #vert habe ich float:left; entfernt
und der "schachtel" habe ich dann float:left; gegeben.

Code:
<div id="container">

   <div id="rahmen" align="center">

      <div id="head">{header}</div>
      <div id="left-side">
         <div id="navi">{navi}</div>
         <div id="cert">{cert}</div>      
      </div>      
      <div id="content"></div>
      <div id="foot">{footer}</div>

   </div>

</div>
__________________
Gruß
Uzu

private Homepage
Mit Zitat antworten
  #15 (permalink)  
Alt 22-07-2008, 13:40
UzumakiNaruto
 Registrierter Benutzer
Links : Onlinestatus : UzumakiNaruto ist offline
Registriert seit: Nov 2004
Beiträge: 642
UzumakiNaruto befindet sich auf einem aufstrebenden Ast
Standard

hi,

da ich validierten quellcode schreiben möchte, kann ich div ids nicht erneut verwenden.

aber jetzt habe ich das "problem", das ich auf diese methode zurückgreifen müsste, wenn ich meine css datei kurz und übersichtlich halten möchte.

ich habe eine navigation in verschiedene blöcke unterteilt und jetzt möchte ich für alle blöcke ein einheitliches aussehen haben.

Code:
|----------------|
|  BLOCK-TITEL   |
|----------------|
|  BlOCK-INHALT  |
|                |
|----------------|
gibt es da irgendeine möglichkeit dafür, das die blöcke immer einen gleichen aufbau haben, ohne alles "neu" zu erstellen?

css
Code:
#block_navi {
   color: #000;
   width:130px;
   margin-left:19px;
   margin-bottom:10px;
   border:1px #808080 solid;
   background-color:#E8E8E8;
}

#block_navi_title {
   color: #FFF;
   font-weight:bold;
   background-color:#81848B;
   padding: 5px;
}

#block_navi_content {
   padding: 5px;
}

#block_login {
   color: #000;
   width:130px;
   margin-left:19px;
   margin-bottom:10px;
   border:1px #808080 solid;
   background-color:#E8E8E8;
}

#block_login_title {
   color: #FFF;
   font-weight:bold;
   background-color:#81848B;
   padding: 5px;
}

#block_login_content {
   padding: 5px;
}
html
Code:
<div id="left-side">
   <div id="block_navi" align="left">
      <div id="block_navi_title">Navigation</div>
      <div id="block_navi_content">
         [...]
      </div>
   </div>
   <div id="block_login" align="left">
      <div id="block_login_title">Login</div>
      <div id="block_login_content">
         [...]
      </div>
   </div>
</div>
__________________
Gruß
Uzu

private Homepage
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

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:39 Uhr.