ComputerBase Menü
Aktuelles

Layout mit HTML & CSS entwerfen

AW: Layout mit PHP entwerfen

frame = alt brauch kein mensch
und da browser optimiert sind, schnell seiten zu laden so laden sie die seite meist in ein cach von daher ist das wieder neue laden der seite extrem schneller als beim 1. aufruf von daher sinlos gerade da man bei den heutigen leitungen sowas nicht mehr braucht ..
 
AW: Layout mit PHP entwerfen

So hab jetzt so einiges PRobier aber bin bis jetzt immer an dem 760px layout mit 3 spalten gescheitert.
Mal war die Kopfzeile verschoben zum Rest (keine Ahnung warum)
Dann habe ich ewig gebraucht um das Texfeld zw 2 menüleisten zu bekommen und als es dann in der mitte war ist der Text teilweise über dem Linken menüfeld gewesen. Es ist echt zum verzweifeln.

Ich schicke mal den Quelltext vielleicht findet wer von euch da den fehler:

HTML: 
<html>
 <title>Startseite</title>
 <head>
  <style type="text/css">

h1 {font-family:arial;
    font-size:25px;
    font-style:italic;
    font-weight:bolder;
    text-align:left;
}
p {margin-top:0px;}

body 
{
 font-family:Arial;
 font-size:12px;
 background-color:#BEBEC8;
 text-align:center;
 margin:0px;
}

#title 
{
width:760px;
height:60px;
padding:5px;
margin:0 auto;
background-color:#BEBEC8;
border-bottom:1px solid #000;
}

a:active, a:hover
{ 
  color:#009999;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #000;
 background-color:#737994;
 text-align:center;
 color:#eeeeee;
 text-decoration:none;
 }
a.menu:link, a.menu:visited
{ 
  color:#eeeeee;
 background-color:#737994;
 text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{ 
  color:#737994; font-weight:bold;
 background-color:#eeeeee;
}
#left, #right {
width:60px;
line-height:18px;
}

#left {
float:left;
}
#right {
float:right;
}

.menutitle
{
font-weight:bold;
text-align:center;
margin:2px;
}

.menucontainer 
{
border:1px solid #000;
background-color:#7b7d8e;
width:170px;
margin:5px;
pedding:5px;
}

#content 
{
float:left;
width:400px;
margin-left:91;
margin-top:10;
border:1px solid #666666
}
  </style>
 </head>
 <body>
  <div id="title">
   <img src="logo.PNG" height="60" style="float:right;width:400px; height:60px;margin-left:-5px;margin-bottom:-20px;margin-right:-5px;margin-top:-5px;" alt="Logo" />

   <h1><font color="#505050">Herzlich Wilkommen auf</font> </h1></div>
<div style="width:760px;margin:0 auto;">
 <div id="left" style="clear:right;">
  <div class="menucontainer">
   <p class="menutitle">MENU 1</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>

   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">
   <p class="menutitle">MENU 2</p>

   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  
  <div class="menucontainer">
   <p class="menutitle">MENU 3</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>

   <a class="menu" href="#">Hyperlink 5</a>
  </div>
 </div>
 <div id="right">
  <div class="menucontainer">
   <p class="menutitle">MENU 1</p>
   <a class="menu" href="#">Hyperlink 1</a>

   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">

   <p class="menutitle">MENU 2</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>

  </div>

  
  <div class="menucontainer">
   <p class="menutitle">MENU 3</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>

   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>
  </div>
  <div id="content">
    fjksdfkl
 </div>
<p style="text-align:left;clear:both;margin-top:20px;"><a class="prev" href="index.html#example">Zur&uuml;ck</a></p>

</div>
 </body>
</html>
 
Zuletzt bearbeitet von einem Moderator: (Bitte [html]-Tag verwenden!)
AW: Layout mit PHP entwerfen

schön wär ein link zu deiner test seite wen du sie online auf ein webspace gespeicehrt hast weil wir nicht die bilder haben von daher es nicht so gut bei uns nach bauen können ...
 
AW: Layout mit PHP entwerfen

Erst mal den CSS-Validator drüberlaufen lassen:

Fehler
* Zeile: 79 Kontext : .menucontainer
Die Eigenschaft pedding existiert nicht : 5px
* Zeile: 86 Kontext : #content
Ungültige Nummer : margin-left nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 91
* Zeile: 87 Kontext : #content
Ungültige Nummer : margin-top nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 10​



  • Die drei falschen Angaben komplett gelöscht.
  • Dann bei #left, #content und #right ein float: left; eingesetzt. Die Elemente sollen von links nach rechts in dieser Reihenfolge angeordnet werden.
  • Die Elemente im body genauso nach #left, #content und #right absteigend angeordnet
  • Den Divs #left und #right eine Breite width:180px; gegeben
  • Dem Div #content eine Breite von 398px gegeben (= 400px minus 1px border-left minus 1px border-right)


Sollte dann soweit passen.
 
AW: Layout mit PHP entwerfen

www.maxhouse.tk

ps.: das mit dem logo net beachten

also bei Firefox 1.5 is es so doof verschoben und der text is überm menü (überdeckend)
 
AW: Layout mit PHP entwerfen

hmmm naja ich hab ihn soweit ich es verstanden hab abegändert allerdings sieht es jetzt wieder komisch aus da die rechte Menüleiste unter dem eigentlichen textfeld ist.
Guck dir das bitte nochma an. Hab bestimmt irgentwas falsch gemacht.

Danke

HTML: 
<html>
 <title>Startseite</title>
 <head>
  <style type="text/css">

h1 {font-family:arial;
    font-size:25px;
    font-style:italic;
    font-weight:bolder;
    text-align:left;
}
p {margin-top:0px;}

body 
{
 font-family:Arial;
 font-size:12px;
 background-color:#BEBEC8;
 text-align:center;
 margin:0px;
}

#title 
{
width:760px;
height:60px;
padding:5px;
margin:0 auto;
background-color:#BEBEC8;
border-bottom:1px solid #000;
}

a:active, a:hover
{ 
  color:#009999;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #000;
 background-color:#737994;
 text-align:center;
 color:#eeeeee;
 text-decoration:none;
 }
a.menu:link, a.menu:visited
{ 
  color:#eeeeee;
 background-color:#737994;
 text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{ 
  color:#737994; font-weight:bold;
 background-color:#eeeeee;
}
#left, #right {
width:180px;
line-height:18px;
}

#left {
float:left;
}
#right {
float:left;
}

.menutitle
{
font-weight:bold;
text-align:center;
margin:2px;
}

.menucontainer 
{
border:1px solid #000;
background-color:#7b7d8e;
width:170px;
margin:5px;
}

#content 
{
float:left;
width:300px;
margin-left:0;
margin-top:0;
border:1px solid #666666
}
  </style>
 </head>
 <body>
  <div id="title">
   <img src="logo.PNG" height="60" style="float:right;width:400px; height:60px;margin-left:-5px;margin-bottom:-20px;margin-right:-5px;margin-top:-5px;" alt="Logo" />
   <h1><font color="#505050">Herzlich Wilkommen auf</font> </h1></div>
<div style="width:760px;margin:0 auto;">
 <div id="left" style="clear:right;">
  <div class="menucontainer">
   <p class="menutitle">MENU 1</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">
   <p class="menutitle">MENU 2</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  
  <div class="menucontainer">
   <p class="menutitle">MENU 3</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>
 </div>
 
 <div id="content">
  fjksdfkl
 </div>
  <p style="text-align:left;;margin-top:20px;"><a class="prev" href="index.html#example">Zurück</a></p>
</div>
 
 <div id="right">
  <div class="menucontainer">
   <p class="menutitle">MENU 1</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">
   <p class="menutitle">MENU 2</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  
  <div class="menucontainer">
   <p class="menutitle">MENU 3</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>
  </div>

 </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
AW: Layout mit PHP entwerfen

Der Teil
HTML: 
  <p style="text-align:left;;margin-top:20px;"><a class="prev" href="index.html#example">Zurück</a></p>
</div>
muß weiterhin ganz unten, direkt über dem </body>, bleiben, zusätzlich wieder das clear:both; rein.



Und bitte verwende beim nächstenmal gleich das HTML-Tag für den Forumscode. :)
 
AW: Layout mit PHP entwerfen

YEEEAAAAHHH
es hat funktioniert
jetzt im nachhinein erscheint es auch ganz logisch

Vielen vielen vielen Dank
das ihr euch so viel mühe gemacht habt.

Aso und ich merks mir mit dem HTML-TAG

Allerdings muss ich sagen das das ganze nur so funktioniert mit dem Firefoxbrowser und nicht im internetexplorer.
Und bei Firefox ist die Titelleiste etwas komisch verschoben ich schreibe nochmal den link herein:

www.maxhouse.tk
 
Zuletzt bearbeitet:
AW: Layout mit PHP entwerfen

Du hast jetzt nur das <p>-Elemtent von oben runtergeholt, das schließende </div> fliegt immer noch rum und muß, wie ichs beschrieben habe, ebenfalls ganz nach unten.


Zudem hast du ein paar Außenabstände (margin) eingebaut, die bei der Berechnung der Breite berücksichtigen musst (Gesamtbreite = width + border + margin). Die width-Angabe des mittleren Divs musst du also entsprechend reduzieren, wenn du noch ein margin hinzugibst.


Weiterhin sind Angaben ohne Einheit ungültig (margin:5px; statt margin:5; verwenden!), außer bei "0".
 
Zuletzt bearbeitet:
Differenz zw. Internet Explorer und Firefox

Ich werde heute noch verrückt.
Im Internet Explorer siehts so aus wie ich es haben will.
In Firefox dagegen überhaupt nicht.

www.maxhouse.tk

vielleicht wisst Ihr was ich im Quelltext ändern muss.

Thx
 
AW: Differenz zw. Internet Explorer und Firefox

Also ich schau die Seite grad mit Firefox an.

Müsstest du nur noch sagen was dir nicht passt?
 
AW: Differenz zw. Internet Explorer und Firefox

die seite sieht in beidem gleich aus
 
AW: Differenz zw. Internet Explorer und Firefox

also bei mir ist sie im firefox kaputt (1.5.0.1) .. der ganze Mittlere Teil ist blau und so ..
 
AW: Differenz zw. Internet Explorer und Firefox

Wass soll da sein? In der Mitte ist ein Flash oder so was. Vllt haste im FF das Plugin nicht am laufen?
 
AW: Differenz zw. Internet Explorer und Firefox

asseskiller schrieb:
Ich werde heute noch verrückt.
Im Internet Explorer siehts so aus wie ich es haben will.
In Firefox dagegen überhaupt nicht.
Zum Vergrößern anklicken....

Das untere <p>-Element muß in das äußerste DIV mit rein, und ein clear:both; dazu. Hab dir doch alles relativ ausführlich beschrieben... :confused_alt:


HTML: 
	<p style="text-align:left;clear:both;margin-top:20px;"></p>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

M
HTML/JavaScript: user input submit in externe Tabelle speichern?
Antworten
8
Aufrufe
1.850
Joshinator
J
CB-Andi
Wie starten mit HTML, CSS und Python
2
Antworten
21
Aufrufe
5.904
andy_m4
andy_m4
SFFox
Websites und Spenden-Formulare - Meinungsbild gefragt
Antworten
3
Aufrufe
963
floq0r
floq0r
R
Neue PC Konfig - Verbesserungen?
2
Antworten
22
Aufrufe
1.021
R0Jal_
R
jusaca
CSS, um mittleren Balken im CB-Layout transparent zu machen
Antworten
3
Aufrufe
1.265
Yuuri
Yuuri
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz