WinFuture-Forum.de: Design-problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Design-problem


#1 Mitglied ist offline   ||F0X3|| 

  • Gruppe: aktive Mitglieder
  • Beiträge: 27
  • Beigetreten: 14. August 05
  • Reputation: 0
  • Wohnort:Lower Saxon :-)
  • Interessen:PC<br />Homepage<br />Fussball<br />COD2<br />Schwimmen

geschrieben 21. Januar 2006 - 17:01

Hallo zusammen!
Hab ein CSS-Problem mit meinem Layout.
Und zwar möchte ich gerne ein tabellenloses Layout erstellen, also nur mit Div´s.
Die Seite ist 860px breit. Die beiden Sidebars habe ich in eine Hintergrundgrafik eingefügt und lass sie repeaten. (siehe anhang)
Den Header sowie die Navbar habe ich schon zentriert usw. das hat alles soweit geklappt. Nur bei der Navigation und dem Content harpert es.
In beiden Bereichen habe ich jeweils hintergrundgrafiken eingefügt ( navi-oben, navi-mitte, navi-unten, content-oben usw.).
Muss ich die einzelnen Bereich jeweils in einzelne Div´s packen ?
Wie bekomme ich es hin, dass die beiden Bereiche ( content u. Navi ) nebeneinander sind und jeweils 5px links und rechts von den beiden Sidebars entfernt sind.
Hab´s schon mit margin-right u left ausprobiert. Nur die Navi und der Content müssen doch nebeneinander floaten oder?
Wenn ich die Vorschau im Browser aufrufe, ist es alles verschoben.

Wäre sehr dankbar, wenn mir jemand bei diesem Problem helfen könnte.
Vielen Dank im Voraus

Angehängte Miniaturbilder

  • Angehängtes Bild: hp_schema.gif

0

Anzeige



#2 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 21. Januar 2006 - 17:31

Hallo. Leichter wär's mit Quellcode oder Link. Schönen Nachmittag.
0

#3 Mitglied ist offline   ||F0X3|| 

  • Gruppe: aktive Mitglieder
  • Beiträge: 27
  • Beigetreten: 14. August 05
  • Reputation: 0
  • Wohnort:Lower Saxon :-)
  • Interessen:PC<br />Homepage<br />Fussball<br />COD2<br />Schwimmen

geschrieben 21. Januar 2006 - 18:02

Hallo.
Die Site ist noch garnicht online.
Quellcode hmm.. na ja hab jetzt schon so viele Sachen ausprobiert, dass ich Ihn erstmal auf den Hintergrund, Header und Navbar reduziert habe. Aber hier ist der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #72838B;
}
-->
</style>
<link href="gpg.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="bg">
  <div id="header"></div>
  <div id="navbar"></div>
</div>
</body>
</html>


und hier die CSS-Angaben für die jeweiligen Div´s: 
#header {
	background-image: url(banner760px_new.jpg);
	height: 130px;
	width: 760px;
	background-repeat: no-repeat;
	margin: 0px auto;
}
#navbar {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-image: url(navbar_bg.jpg);
	background-repeat: repeat-x;
	height: 21px;
	width: 758px;
	margin: 0px auto;
	border: 1px solid #000000;
	margin-top: 3px;
}

#bg {
	background-image: url(bg_main.gif);
	background-repeat: repeat-y;
	width: 860px;
	height: 500px;
	margin: 0px auto;
}


So und unter der Navbar sollen jetzt ja links die Navigation für Kalender, Links etc. hin mit den entsprechenden Hintergrundgrafiken für die Div´s und rechts dasselbe für den Content-Bereich.
Aber irgendwie passt es alles nicht so richtig, ist halt alles verschoben.
Wie soll ich die einzelnen Elemente floaten lassen?
Vielen Dank im Voraus
0

#4 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 22. Januar 2006 - 02:23

Da Navi und Content jeweils wohl eine bestimmte Breite haben sollen, wird für Navi float:left und margin-left ausreichen. Analog dazu fließt content rechts und hat einen rechten Außenabstand.
div.navi {
	background:#ccc;
	float:left;
	width: 200px;
	height: 20px;
	margin: 0 0 5px 50px;
}
div.content {
	float:right;
	background:#ccc;
	width: 500px;
	height: 20px;
	margin: 0 50px 5px 0;
}

wenn das nicht reichen sollte, gib' navi ein clear:both; mit.
<div id="bg">
  <div id="header"></div>
  <div id="navbar"></div>
  <div class="navi">navi</div>
  <div class="content">content</div>
  <div class="navi">navi</div>
  <div class="content">content</div>
  <div class="navi">navi</div>
  <div class="content">content</div>
  <div id="footer"></div>
</div>


<div> ist bei Bedarf durch ein semantisch sinnvolleres Blockelement zu ersetzen, die fixen Längenangaben nach Möglichkeit durch relative ersetzen. Hoffe, es hilft.
0

#5 Mitglied ist offline   ||F0X3|| 

  • Gruppe: aktive Mitglieder
  • Beiträge: 27
  • Beigetreten: 14. August 05
  • Reputation: 0
  • Wohnort:Lower Saxon :-)
  • Interessen:PC<br />Homepage<br />Fussball<br />COD2<br />Schwimmen

geschrieben 07. Februar 2006 - 23:53

Hallo zusammen!
So hab´s jetzt so einigermaßen hinbekommen...
Ein kleines Problem bleibt aber noch:
Ich hab ein Div um den gesamten Inhalt gemacht, und möchte jetzt das der footer immer am Ende dieses umschließenden Divs steht.
Er soll aber nicht am unteren Rand vom Browserfenster feststehen, sondern nur einfach am ende des umschließenden Div´s.
Hab´s mit position: fixed und bottom: 0px; versucht, klappt aber net so richtig (vorallem nicht im IE)

Jemand einen Tip?

Danke im Voraus
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0