Bisherige Joomla Seite mit HTML5 und CSS nachbauen

SebastianH · 16. Februar 2013

Hallo Leute,

nachdem ich den Kurs nun durchgearbeitet habe versuche ich mich an meinem ersten Projekt.
Seit 2008 bin ich selbstständig mit verschiedenen Dienstleistungen für EDV und Büro. Bisher bin ich ohne Website gut zurecht gekommen, möchte nun nach 5 Jahren aber gerne meinen Kundenkreis weiter ausbauen.

Thema Webdesign ist aber ziemliches Neuland für mich.
Also habe ich mal mit joomla rumgespielt: www.dienstleistungenhirth.de

Allerdings bin ich damit nicht wirklich zufrieden und würde das ganze doch gerne "normal" mit HTML5 und CSS gestalten.
Ich versuche also meine Joomla-Seite selber nachzubauen. Falls ich dabei irgendwelche Kompromisse eingehen muss ist das kein Problem.

Im Moment scheitert es aber schon beim Grundgerüst.
Der Backround verhält sich merkwürdig.
Es soll so aussehen wie auf meiner bisherigen Seite mit Joomla. Wo hab ich nen Fehler gemacht?

Wer Zeit und Lust hat mir zu helfen gucke sich bitte beide Dateien mal an.

HTML

<head>
	<title>Sebastian Hirth</title>




	<meta charset="ISO-8859-1">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">




	<link href="style.css" type="text/css" rel="stylesheet">
	<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>




<body>




<div id="header">HEADER</div>
<div id="inhalt">INHALT</div>










</body>

Alles anzeigen

CSS

html, 




body  {
  height: 500px;
	width: 600px;

	background-image: -moz-linear-gradient(top, #C3C1C1, #E1E1E1);
	backround-repeat: none;

}




/* header */




#header {
	height: 150px;

/* Farbverlauf */
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);

/* Runde Ecken */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px 10px 0 0;

/* Schrift Header*/




	padding-top: 1em;
	padding-left: 1em;

}




#inhalt {
	background-color: #FFFFFF;
	height: 450px;
	padding-top: 1em;
	padding-left: 1em;
}

Alles anzeigen

Hinweis: Auslachen ist verboten! Was PCs angeht bin ich zwar nicht dumm, aber irgendwie ist das Thema Webdesign all die Jahre an mir vorbei gegangen. Bin also blutiger Anfänger.
Wenn jemandem an meinen Dateien also irgendwas auffällt was totaler Murks ist, dann bitte korrigiert mich da.

Vielen Dank schonmal für eure Hilfe.
Sebastian

Roland · 16. Februar 2013

height: 500px;
width: 600px;

du sagst das dein body bloß 500px hoch sein soll.
also ist auch der Hintergrund 500px groß.

SebastianH · 16. Februar 2013

ok, danke. habe nun "height" beim body einfach rausgenommen.
aber ich möchte des der Farbverlauf im Backround über die gesamte Höhe verteilt wird und sich nicht wiederholt.
Deutlich wird das auf der Joomla-Seite bei "Leistungen", da habe ich mehr Inhalt drin. Der Farbverlauf läuft dann einfach sauber bis zum Ende der Seite.

HTML

<head>
	<title>Sebastian Hirth</title>




	<meta charset="ISO-8859-1">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">




	<link href="style.css" type="text/css" rel="stylesheet">
	<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>




<body>




<div id="header">HEADER</div>
<div id="inhalt">INHALT</div>










</body>

Alles anzeigen

CSS

html, 




* {
	margin:auto}




body  {

	width: 600px;

	background-image: -moz-linear-gradient(top, #C3C1C1, #E1E1E1);
	backround-repeat: none;

}




/* header */




#header {
	height: 150px;

/* Farbverlauf */
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);

/* Runde Ecken */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px 10px 0 0;

/* Schrift Header*/




	padding-top: 1em;
	padding-left: 1em;

}




#inhalt {
	background-color: #FFFFFF;
	height: 450px;
	padding-top: 1em;
	padding-left: 1em;
}

Alles anzeigen

Roland · 16. Februar 2013

da würde ich emfelen den body immer so groß wie nötig oder so groß wie der bildschirm ist zu machen
und damit das dann rechts und links abstand hat würde ich das ganze nochmal in ein div packen also so:

CSS

html{
    min-height: 100%;
    min-width: 100%;
}
body {
    background-image: -moz-linear-gradient(center top , #C3C1C1, #E1E1E1);
    margin: 0;
    min-height: 100%;
    min-width: 100%;
}

HTML

<body>
<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="inhalt">INHALT</div>
</div>
</body>

SebastianH · 16. Februar 2013

hm, also mit dem Farbverlauf scheint das jetzt zu kappen.

allerdings sind jetzt alle bereiche so breit wie das gesamte Fenster.
Ich möchte aber zentriert einen Bereich von ca. 500px in dem sich der ganze Inhalt abspielt.
so wie in meinem Beispiel: www.dienstleistungenhirth.de

ne idee?

Roland · 16. Februar 2013

ups hatte die zeile vergessen:

CSS

#wrapper{
    width:500px;
    margin: 0 auto;
}

SebastianH · 16. Februar 2013

ahh, sehr schön. vielen Dank.

so, dann komm ich jetzt hoffentlich erstmal alleine weiter.

dankeschön.

SebastianH · 16. Februar 2013

und zak, da geht es auch schon weiter.

folgendes Problem:
HIER seht ihr es. Das "Logo" wird irgendwie nicht rechtsbündig im Header positioniert. irgendwie habe ich das Gefühl das es gar nicht zum header gehört. Obwohl ich den div vom Logo im div des headers stehen habe.
Kann mir jemand sagen wie ich das am besten löse, bitte bitte. Das Logo soll rechts im Header sein, und zwar unabhängig von der Fensterbreite.

HTML

<div id="wrapper">
	<div id="header">HEADER
		<div id="logo"><img src="bilder/logo_s_h.gif" width:"100px" height="100px"alt="logo"></div>
	</div>
	<div id="balken"></div>
	<div id="inhalt">INHALT</div>
	<div id="fussbereich">FUSSBEREICH</div>
</div>

CSS

html{
	min-height: 100%;
	min-width: 100%;
}
body {
	background-image: -moz-linear-gradient(center top , #C3C1C1, #E1E1E1);
	margin: 20px 0 0 0;
	min-height: 100%;
	min-width: 100%;
}
#wrapper{
	width: 1000px;
	margin: 0 auto;
}




#header {
	height: 100px;
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #E1E1E1 100%);





	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-ms-webkit-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;




	padding-top: 1em;
	padding-left: 1em;
}




#logo {
	position:absolute;
	top:20px;
	left:1250px;
	bottom:0;
	right:0;
}




#balken {
	background-color: #555;
	height: 50px;
}




#inhalt {
	background-color: #FFF;
	height: 450px;
	padding-top: 1em;
	padding-left: 1em;
	margin-top:10px;

	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-ms-webkit-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}




#fussbereich {
	background-color: #555;
	height:150px;

	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-ms-webkit-border-radius: 0 0 5px 5px;
	-o-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
}

Alles anzeigen

Roland · 16. Februar 2013

position absolue heist: egal in welchen element es steckt positioniere es genau an dieser stelle.

mach das am besten so
#logo{
float:right;
}

und ich sehe du hast den body margin gegeben. (ich persönlich mag das nicht so) du kannst lieber den wrapper den margin geben mit margin: 20px auto;

SebastianH · 16. Februar 2013

ja, super. mit float klappt es.

margin habe ich auch zum wrapper geschoben.
Aber ich hab jetzt ne scroll bar unten im browser. Wieso das?

Roland · 16. Februar 2013

unten? lade mal den code wieder auf deine testseite hoch

SebastianH · 16. Februar 2013

geschehen

Bisherige Joomla Seite mit HTML5 und CSS nachbauen

Jetzt mitmachen!

Teilen