Forum
Tipps
News
Menu-Icon

Div oder Frames?

Hallöchen
ich bräuchte mal ne Entscheidungshilfe.
Und zwar möcht ich den eigentlichen Teil meiner Homepage zentriert im Fenster ausgerichtet haben, ringsum Freiraum. Habe mich zum Thema Frames und Container schon bei SELFhtml informiert, aber iwie war das nicht so ganz das, was ich wollte...

Hab ich mir gedacht, dass ich zunächst die BG-Color im Body Teil festlege und dann einen Div-Container erstelle. Frage 1:

Ist es möglich, dem Container eine feste Breite zuzuweisen, wenn ja: geht das im einleitenden Teil , also <div.....> .....? Kann ich dann auch dort direkt die Ausrichtung, in diesem Fall also "center" vornehmen?

Desweiteren habe ich mir überlegt, diesen, oben genannten , Bereich in 4w weitere aufzuteilen. Kann ich dazu einfach zwischen die beiden <div>-Tags von oben weitere Div-Container mit Ausrichtung sowie Breiten-/Höhenangaben setzen?

Oder ist es sinnvoller , einen Teil oder Alles mit Frames zu bearbeiten?

Hoffe das war jetzt verständlich

LG ud Vielen Dank im Voraus

Dark_Dog


Antworten zu Div oder Frames?:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi |

Frames sind nicht wirklich zu empfehlen, aber natürlich trotzdem möglich. DIVs sind da schon erste Wahl. SelfHTML lässt da eigentlich kaum Fragen offen.

Zur Zentrierung des DIV-Containers: http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

Für das Layout mit mehreren gestaffelten DIVs kannst du hier schauen: http://de.selfhtml.org/css/layouts/index.htm

greez 8)
JoSsiF

Schomal Danköö^^

 

Zitat
#zentriert {
  position:absolute;
  top:50%;
  left:50%;
  width:30em;
  height:20em;
  margin-left:-15em;
  margin-top:-10em;
}

Ich nehme an, dieser Teil kommt in die Stylesheet und Zentriert muss durch die entsprechende id ersetzt werden?
 
« Letzte Änderung: 28.03.07, 17:01:41 von Dark_Dog »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Jo, und die Maße musst du auf deinen DIV anpassen.

....heisst also, width and hight sind die maße des DIV's? oder? allerdings ist mir "em" noch kein begriff...

Ich nochmal...

Habe mich jetzt ein bisschenmit dem Thema auseinandergesetzt und herauskommen sollte dies hier:

 

Gesamtgröße 800x600, festgelegt durch den Container "rahmen"...

Dann sollte oben der header (Container mit id "header") zu sehen sein, ist er aber nicht. Direkt unter dem header der Container "navi" mit den Maßen 800x25, links darunter der Container "news" und rechts daneben der Container "inhalt".

Doch das Ergebnis ist dieses hier:

Homepage

Hier der Quellcode der stylesheet.css und index.html

 

Zitat
body {font-family: Arial;
      background-color: #D3D3D3;}
a {color: #ffffff;
   font-weight: bold;}
a:visited {color: #ffffff;
   font-weight: bold;}
a:active {color: #ffffff;}
a:hover {color: #808080;
   font-weight: bold;}
#rahmen {width: 800px;
   height: 600px;
   position:absolute;
     top:50%;
     left:50%;
     width:30em;
    height:20em;
     margin-left:-15em;
     margin-top:-10em;
         border: solid #000000 1px; }
#header {background-image: url(/header.GIF)
   height: 140px;
   width: 800px;
   border: solid #000000 1px;}
#navi {width: 800px;
   height: 25px;
   border: solid #000000 1px;}
#news {  width: 125px;
   height: 435px;
   border: solid #000000 1px;}
#inhalt {width: 675px;
   height: 435px;
   border: solid #000000 1px;}

 
Zitat
<html>
<head>
<title>Home</title>
<meta name="description" content="Private Website von Eike Hörding (Dark_Dog)">
<meta name="author" content="Administrator">
<meta name="keywords" content="Eike Hörding, Dark_Dog, Modding">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<meta name="language" content="de">
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body text="#ffffff" link="#FFffff" alink="#ffffff" vlink="#ffffff">
      <div id="rahmen">
      <div id="header"></div>
      <div id="navi"></div>
      <div id="news"></div>
      <div id="inhalt"></div>
      </div>
</body>
</html>
 

Hier nochmals der Link zum Bild

http://solo.so.ohost.de/Eike/vorlage.JPG
« Letzte Änderung: 29.03.07, 17:30:59 von Dark_Dog »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Du hast im #rahmen je zweimal width und height definiert. einmal in px einmal in em.

Mach's mal so:

#rahmen {width: 800px;
   height: 600px;
   position:absolute;
     top:50%;
     left:50%;
         margin-left:-400px;
     margin-top:-300px;
         border: solid #000000 1px; }

what?

url=http://pgk-home.de.vu]PGK-HOME[/url]

Danke schonmal

Die Stylesheet sieht nun so aus:

 

Zitat
body {font-family: Arial;
      background-color: #D3D3D3;}
a {color: #ffffff;
   font-weight: bold;}
a:visited {color: #ffffff;
   font-weight: bold;}
a:active {color: #ffffff;}
a:hover {color: #808080;
   font-weight: bold;}
#rahmen {width: 800px;
   height: 600px;
   position:absolute;
     top:50%;
     left:50%;
     margin-left:-400px;
    margin top:-300px;
     border: solid #000000 1px; }
#header {background-image: url(/header.GIF)
   height: 140px;
   width: 800px;
   border: solid #000000 1px;}
#navi {width: 800px;
   height: 25px;
   border: solid #000000 1px;}
#news {  width: 125px;
   height: 435px;
   border: solid #000000 1px;}
#inhalt {width: 675px;
   height: 435px;
   border: solid #000000 1px;}

Der #rahmen ist zwar nun horizontal ausgerichtet, dennoch wird der header noch immer net angezeigt, und #inhalt sollte sich eig. rechts unten im #rahmen, also rechts neben #news befinden...

LG

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Im Header erscheint deshalb nichts, weil der Link zum background-image falsch ist. Ist das Bild im gleichen Ordner, dann lass mal den Schrägstich weg.

Den news ordne ein

float:left;zu.

Dann setze die Breite vom Inhalt oder von den News mal um 4px zurück (das ist der Platz für den border)

Ahja danke, aber mit einem Punkt vor dem / müsste es gehen oder?

Zumindest befindet sich nun alles im #rahmen, hat jedoch irgendwie nicht die richtige Größe..

 

« Letzte Änderung: 29.03.07, 18:53:48 von Dark_Dog »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Wenn's geht geht's, wenn nicht dann nicht.
Schreib einfach mal einen Text in den Header oder ordne ihm einen height-Wert zu. Dann siehst du, dass er da ist.

Ehm in der stylesheet oder im einleitenden div Tag? Und den TEXT?

Ah ok, hat woanders dran gelegen, hatte zwischen bg-img und height teil das Semekolon vergessen. Aber wieso ist der #rahmen "nur" horizontal ausgerichtet bzw was kann ich dagegen tun?

Ich habe übrigens Noch beim #inhalt float:right ergänzt , sieht doch soweit schonmal ganz Gut aus oder?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Bei margin-top fehlt der Bindestrich.


« Google Map in Javascript-variable referenzierenjoomla »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Grundstrich
Der Begriff des Grundstrichs im Bereich der Typografie, bezeichnet den senkrechten Strich der Buchstaben. Bei Schriftarten mit variabler Strichstärke, wie zum Beispi...

Haarstrich
Der Begriff Haarstrich stammt aus dem Bereich der Typographie. Bei Schriften, wie zum Beispiel der Antiquaschrift mit unterschiedlichen Strichstärken, wird zwischen ...

Quellcode
Ein Quellcode, auch als Quelltext bekannt, bezeichnet den unkompilierten Programm-Code einer Software. Quell- oder Programm-Code ist der auch für Menschen lesbare Co...