• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout Probleme

nudelz

nudelz

Neues Mitglied
hallo erstmal,
ich bin recht neu in dem gebiet und noch am experimentieren. ich arbeite momentan einer website. habe schon das design und alles. aber ich schaffe es nicht einen rand zu machen. links und rechts.
ich stelle mir das so vor:
aufbau..jpg

so sieht es aus layout..jpg habe eine auflöung von 1920x1080. und ich kriege es auch nicht hin das logo zu zentrieren.

ich habe allerdings das problem das ich links und rechts wo einfach nur ien hintergrund sein soll, frames. und wenn man eine niedrigere auflösung hat, werden die frames in der mitte kleiner. :( wie krieg ich das hin.

meine html code momental für index:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<central>
<frameset rows="248,*" cols="416,*,432" frameborder="no" border="0" framespacing="0">
  <frame src="rasterlinksoben.html">
  <frame src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frame src="rasterrechtsoben.html">
  <frame src="rasterlinksunten.html">
  <frameset rows="*" cols="183,*" framespacing="0" frameborder="no" border="0">
    <frame src="navi.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="menu.html" name="mainFrame" id="mainFrame" title="index.html" />
  </frameset>
  <frame src="rasterrechtsunten.html">
</frameset>
<noframes><body>
</body></noframes>
</html>
versteht ihr was ich meine? wie kriege ich das hin? arbeite mit dreamweaver und normalen editor.
schon mal vielen dank
 
Hallo.

Ich kann dir leider nur raten die Frames wegzulassen und nochmal ganz von vorne anzufangen.
Diesmal ohne Frames. Frames haben nur Nachteile für dich und deine Benutzer.

Gruss
Elroy
 
habe mich jetzt mal was mit css auseinander gesetzt.

habe eine css datei erstellt:
Code: 
#header {

margin:0px auto; /*mittig*/

width:900px;

height:200px;

background-color: #FFF;

}

#gesamt {

margin:0px auto; /*mittig ausrichten*/

width:900px;

height:auto;

}

#main {

margin:0px auto;

float:right;

width:700px;

height:400px;

background-color:#FFF;

}


#left {

margin:0px auto;

float:left;

width:200px;

height:400px;

background-color:#FFF;

}



 #gesamt #left p {
    font-family: Verdana, Geneva, sans-serif;
}
und eine html datei:
HTML: 
<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Style-Type" content="text/css" />

<link href="Unbenannt-2.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="header"><img src="bilder/header2.jpg" width="897" height="192" alt="Header"></div>

<div id="gesamt">

<div id="main">
  <p> Startseite</p>
</div>

<div id="left">
  <p>Navigation    </p>
  <p>Home    </p>
  <p>Kontakt    </p>
  <p>Impressum    </p>
  <p>Haftungsausschluss    </p>
  <p>Satzung    </p>
  <p>Mitgliedschaft    </p>
  <p>&nbsp;</p>
  <p>Historie </p>
  <p>Melaten    </p>
  <p>Aktuelles    </p>
  <p>Publikationen    </p>
  <p>Online-Beiträge    </p>
  <p>Web-Archiv    </p>
  <p>Presse    </p>
  <p>Veranstaltungen    </p>
  <p>Links </p>
</div>

</div>

</body>

</html>
jetzt mal meine probleme.

ich ich kriege es einfach nicht raus. wie kriege ich jetzt in der css datei ein hintergrundbild einfügen für den bereich der nicht für div definiert ist. hab mit befehlen wie #page_bg versucht und alless hat nicht geklappt. steh echt auf dem schlauch.

und wie mache ich das jetzt mit den anderen seiten. ich hab ja jetzt eine html datei. da sind navi header und main in einem. muss ich die jetzt auf jede seite übernehmen? und muss ich die links im navi dann mit den html seiten verbinden und die dann einfach neu im selben fenster laden lassen? also geht das nicht das man nur das main fenster lädt?

sry, aber ich steh echt auf dem schlauch







hab jetzt einfach mal den inhalt auf eine andere website übertragen. den text beim main div geändert. dann hab ich in der ausgangsdatei ein hyperlink drauf gemacht, der sich _self öffnet. das hat jetzt eigntlich geklappt. ist das eine lösung die man durch aus nehmen kann?
 
Zuletzt bearbeitet:
Um CSS richtig verwenden zu können, muss man aber auch HTML perfekt beherrschen. Da ist noch ein bisschen was im Argen bei Dir. Zum Beispiel zeichnest Du Dein Menü als eine "Gruppe von Textabsätzen" aus, was ja nicht passt. Ein Menü ist eigentlich eine "Liste von Links", also solltest Du auch eine Liste dafür verwenden.

Dann Dein div#header, das ist keine Überschrift, auch wenn Du es so nennst. Für Überschriften gibt es eigene Tags, ab <h1>, hierbei auf die Ordnung der Überschrift achten.

Und <div> ist nur zur Auszeichnung einer Gruppe.

wie kriege ich jetzt in der css datei ein hintergrundbild einfügen für den bereich der nicht für div definiert ist.
Zum Vergrößern anklicken....
Ein Hintergrundbild definierst Du für ein bestimmtes Element. Welches darfs denn sein?

und wie mache ich das jetzt mit den anderen seiten. ich hab ja jetzt eine html datei. da sind navi header und main in einem. muss ich die jetzt auf jede seite übernehmen?
Zum Vergrößern anklicken....
Theoretisch ja, praktisch verwendet man dafür eine serverseitige Programmiersprache mit einer "include"-Option. In PHP heißt der Befehl übrigens "include()".

und muss ich die links im navi dann mit den html seiten verbinden und die dann einfach neu im selben fenster laden lassen?
Zum Vergrößern anklicken....
Ja, das ist normal so, das ist gut so, das hat sich bewährt. Wenn Du Teile der Seite laden könntest/würdest, dann würde der Browser ja nicht wissen, welche URL er in der Adresszeile anzeigen soll, bzw. zeigt die falsche an. Das übliche Problem von Frames.

sry, aber ich steh echt auf dem schlauch
Zum Vergrößern anklicken....
Dann geh mal einen Schritt zur Seite :-)

dann hab ich in der ausgangsdatei ein hyperlink drauf gemacht, der sich _self öffnet. das hat jetzt eigntlich geklappt. ist das eine lösung die man durch aus nehmen kann?
Zum Vergrößern anklicken....
"target" kannst Du bei einer Site ohne Frames getrost vergessen. Links öffenen sich per Default immer im selben Fenster, bzw so wie es der Nutzer in seinem Browser eingestellt hat.

Was Deine sonstigen Lösungen angeht, kann man das am besten mit einem Link zur Seite prüfen.

Aber wie gesagt, Du solltest unbedingt noch Deine Semantik verbessern, sonst hast Du mit CSS doppelte Arbeit.

Ach ja, und weil es noch nicht gesagt wurde: Die Auflösung ist beim Erstellen von Websites irrelevant. CSS kennt diese Größe auch gar nicht.
 
super danke shconmal. ich habs jetzt geschafft "mehr oder weniger" :)

ich hab jetzt links 2 spry menüs eingefügt, die ich auch schon verlinkt habe. nur irgendwie verstehe ich nicht, wieso wenn ich auf home gehe das ganze größer wird. als ob der zoomen würde. bei allen anderen ist das nicht der fall. hab auch schon den html code komplett kopiert von ner seite wo das nicht der fall ist und in den index kopiert. aber ist immer noch der fall.

so siehts bisher aus
Unbenannt..jpg

was ich aber einfach nicht verstehe ist wie ich mein hintergrundbild in den weissen bereich aussen kriege.
Ein Hintergrundbild definierst Du für ein bestimmtes Element. Welches darfs denn sein?
Zum Vergrößern anklicken....
habe mit photoshop ein bild erstellt. es ist 1024x768 groß und ist einfach ein farbiger hintergrund mit einem muster drauf. der pfad liegt bei "bilder/hintergrund.jpg". es müsste ja logischerweise
moz-screenshot.png
in die css datei rein, aber ich weiss eifnach nicht wo da.

Code: 
 #header {

margin:0px auto; /*mittig*/

width:900px;

height:200px;

background-color: #FFF;

}

#gesamt {

margin:0px auto; /*mittig ausrichten*/

width:900px;

height:700px;

}

#main {

margin:0px auto;

float:right;

width:700px;

height:600px;

background-color:#FFF;

}


#left {

margin:0px auto;

float:left;

width:200px;

height:600px;

background-color:#FFF;

}



 #gesamt #left p {
    font-family: Verdana, Geneva, sans-serif;
}
 
nudelz schrieb:
nur irgendwie verstehe ich nicht, wieso wenn ich auf home gehe das ganze größer wird.
Zum Vergrößern anklicken....
Das kann ich mir auch nur erklären, wenn ich es am lebenden Objekt sehe. Wie war der Link zur Seite?

hab auch schon den html code komplett kopiert von ner seite wo das nicht der fall ist und in den index kopiert. aber ist immer noch der fall.
Zum Vergrößern anklicken....
1. Man kopiert sich auch nicht einfach was, ohne zu wissen, ob es das ist, was man will.
2. Man sollte sich immer mit HTML & CSS beschäftigen.
3. Wenn Du ein optisches Problem hast, ist HTML die falsche Baustelle. HTML ist nur für die Semantik da, das Aussehen wird von CSS gemacht.

so siehts bisher aus
Zum Vergrößern anklicken....
Screenshots sind völlig uninteressant und nicht geeignet, Probleme zu lösen.

was ich aber einfach nicht verstehe ist wie ich mein hintergrundbild in den weissen bereich aussen kriege.
Zum Vergrößern anklicken....
Wie schon gesagt, ein Hintergrundbild weist man einem Element zu. Welches darfs denn sein?

es müsste ja logischerweise file:///C:/Users/Kottmann/AppData/Local/Temp/moz-screenshot.png in die css datei rein
Zum Vergrößern anklicken....
Nein, nur wenn Du nicht willst, dass jemand anders das Bild sehen kann.

Hintergrundbilder fügt man mit "background-image" in das Element ein.
 
also das mit dem zoom war scheinbar nur mit meinen offline datein.
http://jako.kilu.de/index.htmlhttp://jako.kilu.de/index.html hier habe ich mal index.html und impressum und die nötigen datein hochgeladen. ist natürlich jetzt noch kein inhalt da, aber es geht ja ums layout. ich möchte jtezt noch dieses bild was acuh auf der seite zu sehen ist links und rechts haben. wie zbsp http://www.mydealz.de/12346/cinemaxx-gutschein/ die haben ja dieses gestreifte, aber ich möchte das halt nur links und rechts haben. muss ich die bereiche im css vorher definieren?
 
Zuletzt bearbeitet:
nudelz schrieb:
ist natürlich jetzt noch kein inhalt da, aber es geht ja ums layout.
Zum Vergrößern anklicken....
Layout macht man mit CSS.
CSS baut auf einem validen und semantisch sinnvollen HTML-Code auf.
Semantik kann man nur mit Inhalt vergeben.

Daraus folgt: Layout kann man nur machen, wenn man Inhalt hat.

Für Anfänger, insbesondere auch um zu verstehen, was HTML eigentlich ist, und um besser zu lernen, gilt:
1. Inhalt schreiben.
2. Inhalt semantisch mit HTML auszeichnen.
3. Erst dann Layout/Design mit CSS machen.
 
ich habe den inhalt in word dokumenten. wieso gibt es den templates? da hat man auch erst sein layout. kann mir jmd helfen wie das mit dem rand geht oder nicht.
 
nudelz schrieb:
ich habe den inhalt in word dokumenten.
Zum Vergrößern anklicken....
Dann besser mit Cut&Paste rauskopieren und nicht Word als HTML abspeichern lassen.

wieso gibt es den templates?
Zum Vergrößern anklicken....
Wer sagt denn, dass Templates funktionieren? Templates haben keinen Inhalt, die semantische Auszeichnung mit HTML ist daher nicht möglich.
Da muss dann der Webmaster trotzdem nochmal ran, er muss da trotzdem HTML können; leider machen das die wenigsten, das Ergebnis ist eine semantisch schlechte Website. Und Semantik ist nunmal der Sinn von HTML.

kann mir jmd helfen wie das mit dem rand geht oder nicht.
Zum Vergrößern anklicken....
Gib dem body einfach background-image:url(http://jako.kilu.de/bilder/hintergrund.jpg);
 
spizte es hat endlich geklappt. yeah. ich hatte wohl den body vergessen oder eine geschweifte klammer. super danke!
 
Letzte Problem

also das wirklich nun das letzte problem.
ich habe in die menü leiste spry menüs (vertikal) eingebaut. hat alles wunderbar geklappt hab auch farben breite etc. geändert.
NUR wenn da nicht dieser IE wäre, worauf man schon achten muss, da es ja immer noch leute gibt die ihn nutzen leider, sind die sprys kaputt.

kurze bilder dann code:
FF..jpgIE..jpg

Ich denke es ist klar welches IE ist.
Es handelt sich dabei um die IE8. mit chrome klappt es auch ohne probleme. Die Spry Version ist 1.6.1.

so nun die codes
von der html seite:
Code: 
<div id="left">
  <p align="left"><font style="background-color:#FFF" face="Verdana, Geneva, sans-serif" ><b>&nbsp; Navigation</b></font></p>
  <ul class="MenuBarVertical" id="MenuBar1">
  <li><a href="index.html" title="Home">Home</a></li>
<li><a href="kontakt.html" title="Kontakt">Kontakt</a></li>
<li><a href="impressum.html" title="Impressum">Impressum</a>      </li>
    <li><a href="disclaimer.html" title="Haftungsausschluss">Haftungsausschluss</a></li>
    <li><a href="satzung.html" title="Satzung">Satzung</a></li>
    <li><a href="beitritt.html" title="Mitgliedschaft">Mitgliedschaft</a></li>
  </ul>
  <p>&nbsp;</p>
   <ul id="MenuBar2" class="MenuBarVertical">
    <li><a href="historie.html" title="     Historie Aachener Melaten"> Historie Aachener Melaten</a></li>
<li><a href="publikationen.html" title="Publikationen">Publikationen</a></li>
<li><a href="beitraege.html" title="Online-Beitr&auml;ge">Online-Beitr&auml;ge</a></li>
</ul>
  <p>&nbsp;</p>
   <ul id="MenuBar3" class="MenuBarVertical">
    <li><a href="veranstaltungen.html">Veranstaltungen</a></li>
    <li><a href="links.html">Links</a></li>
  </ul>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

der Code vom Spry:
Code: 
@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 80%;
    font-family:Verdana, Geneva, sans-serif;
    cursor: default;
    width: 13em;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 10m;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
    left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
    width: 10.2em;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
    border: 1px solid #FFF;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
    border: 1px solid #FFF;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
    display: block;
    cursor: pointer;
    background-color: #FFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
    background-color: #FFF;
    color: #FFF;
    font-weight: bold;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
    background-color: #336600;
    color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarVertical li.MenuBarItemIE
    {
        display:inline;
        f\loat: left;
        background: #FFF;
    }
}

Was ist da los :(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben