Bräuchte einen hilfreichen Link für Designumsetzung

Cesc

Cesc

Hehe
9 Juli 2007
3.743
175
Hi :D
Ich bräuchte mal eure Hilfe. Und zwar bin ich auf der Suche nach einem Tutorial oder ähnlichem, wo erklärt wird, wie ich am besten ein Design richtig umsetze.

Bis jetzt, habe ich das immer alles mit Tabellen gemacht. Nun möchte ich aber mal was anderes ausprobieren. Ich habe schon viel von Divs und ähnlichem gehört.

Ich würde mein Design gerne so umsetzen:

Oben, Header
Links, Menü Links
Mitte, Content
Rechts, Newsboxen
Unten, Footer

Ich hoffe, mir kann jemand helfen :ugly:


Mfg Cesc
 
https://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
engl. Tutorial

https://www.css4you.de
dt. Seite mit so ziemlich allen befehlen.


So in etwa könnte es aussehen.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[B]<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />[/B]*/ einbinden der css datei/*
</head>
<body>
<div id="MainFrame">
  <div id="Header"></div>

      <div id="Menuboxleft"></div>
      	<div id="main">
				</div>
      <div id="Menuboxright"></div>
  <div id="footer"></div>
</div>
</body>
</html>

css datei.

HTML: 
body {
background-color: #373737;
background-image: 		
url('../images/xxx.gif');
background-repeat:		repeat-x;
margin:                                   0 auto; */ zum zentrieren des divs funktioniert jedoch nur im strict doctype. /*
}
#MainFrame {	text-align:	left;
width:	960px;
background-color: 	#212121;
border: 	solid 1px #444444;
}
#Header {text-align:		left;
width:			954px;
height:			318px;
background-color:		#1a1a1a;
margin-left:		3px;
margin-top:		3px;
padding-top:		10px;
background-image:   	url('../images/Header.jpg');
background-repeat:	no-repeat;
}
#Menuboxright {
text-align:	left;
margin-left: 		10px;
margin-top: 		5px;
margin-right:		10px;
margin-bottom:		10px;
width:			170px;
min-height:		700px;
background-color: 		#000000;
border:			solid 1px #444444;
float:			right;
}
#main {
margin-bottom:			10px;
margin-top:				5px;
float:					left;
width:					550px;
overflow:				hidden;
padding:				0px 10px 0px 10px;
border:					solid 1px #444444;	
font-size:				12px;
font-family:			Verdana, Arial, Helvetica, sans-serif;
color:					#ffffff;
background-color: 		#191919;
}#footer {
margin:					0 auto;
width:					938px;
height:					51px;
margin-bottom:			10px;
text-align:				center;
font-size:				10px;
padding-top:			10px;
color:					#ffffff;
background-color:		#000000;
border:			solid 1px #444444;	
padding-bottom:			3px;
clear:					both; 
background-image:		url(../images/foot.gif);
background-repeat:		no-repeat;
background-position:	bottom center;
}
Alles nur Beispielwerte bzw. Beispeilbefehle.
 
Danke für eure Links schonmal.
Jetzt habe ich ein anderes Problem.
Und zwar wollte ich wissen, ob es sinnvoll ist, einen iFrame für ein Design zu nutzen und welche anderen Möglichkeiten es dafür gibt.


Mfg Cesc
 
Cesc schrieb:
Und zwar wollte ich wissen, ob es sinnvoll ist, einen iFrame für ein Design zu nutzen und welche anderen Möglichkeiten es dafür gibt.
Zum Vergrößern anklicken....
Sinnvoll ist es nicht, da es nicht besonders suchmaschinenfreundlich ist und zum anderen kriegst du deine Websites schlecht validiert damit.

Wieso einen iFrame? Eine Seite ist doch ein Teil, alles gehört zusammen. Wieso sollte man das separieren?

edit:
Die Frage nach einer anderen Möglichkeit: Naja, ganz normal eben alles zusammenlassen.
 
Dsa Problem ist folgendes.
Ich hab bisher immer nur mit Tabellen gearbeitet und den Content dann in einem iFrame erscheinen lassen.

Nun will ichs eben anders machen, weiß aber nicht genau wie ich das machen soll :ugly:
 
Cesc schrieb:
Nun will ichs eben anders machen, weiß aber nicht genau wie ich das machen soll :ugly:
Zum Vergrößern anklicken....
Mach es halt einfach mal ganz natürlich:

  • keine Tabellen, wenn es keine Tabellen sind
  • gliedere die Design-Blöcke (Navigation, Footer, Header, Boxen...) mit <div>-Blöcken (is ja in den Links schon erklärt)
  • setze den Content dahin, wo er hingehört; also da, wo früher der iFrame war, setzt du jetzt direkt den Content hin
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Kino-Bot
Kino Missing*Link
Antworten
0
Aufrufe
126
Kino-Bot
Kino-Bot
N
bezahlter Link
Antworten
1
Aufrufe
1K
klamm
klamm
Zurück
Oben