Beiträge von SebastianH
-
-
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? -
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
Alles anzeigenhtml{ 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; } -
ahh, sehr schön. vielen Dank.
so, dann komm ich jetzt hoffentlich erstmal alleine weiter.
dankeschön.
-
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: http://www.dienstleistungenhirth.dene idee?
-
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
Alles anzeigen<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>CSS
Alles anzeigenhtml, * { 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; } -
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: http://www.dienstleistungenhirth.deAllerdings 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
Alles anzeigen<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>CSS
Alles anzeigenhtml, 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; }
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
