[CSS] Hilfestellung beim Verwirklichen von Design

muddern · 24. Oktober 2010

Hilfestellung beim Verwirklichen von Design

Hallo,

ich habe mich für Bekannte hingesetzt und was entworfen. Soll auch alles so bleiben, nur habe ich keine Ahnung, wie ich das, was ich mir vorgestellt habe "coden" kann. Ich versuche mal, dass zu erklären und vielleicht kann mir ja jemand helfen oder mir sagen, wo ich Tutorials finde, mit denen ich mir das selber beibringen kann.

{bild-down: https://www1.xup.in/tn/2010_10/75742966.jpeg}

So, ich versuche jetzt mal zu erklären, wie ich mir das vorgestellt habe

Also Header und Footer sollen immer auf die volle Auflösung des Nutzers gestreckt werden, natürlich nur als Background sozusagen, nicht also die Schrift und so.
Hier mal als Bild zu Erklärung:

Also soll Unten und Oben immer diese weiße Leiste mit dem blauen Rand sein.

Und dann sollte halt, wenn ich mal viel als Content zu schreiben habe, das ganze auch in der Höhe angepasst werden, also das der weiße Content Kasten länger wird und der untere Teil der Webiste halt runter rutscht.

Das ich das Design dafür slicen muss und dann beim Content zum Beispiel ein dünnes Teilstück immer wieder repeaten muss, je nachdem wieviel Text ich habe weiß ich. Ich weiß nur nicht wie genau ich slicen soll und wie ich es coden kann. Da es ja aber ne relativ simple Website ist denke ich, dass mir hier vielleicht, hoffentlich jemande helfen kann, für den das ne Klacks ist.

Ich kann als Gegenleistung leider nur meine ewige Dankbarkeit anbieten und ne Bewertung, denn ich bekomm selber dafür ausschließlich ne leckeres Essen und ich glaube nicht, dass mein Retter die Rest in ner Tupperdose zugeschickt haben will.

Vielen vielen Dank für diejenigen, die versuchen werden mir zu helfen!

Anzeige

powernator · 24. Oktober 2010

AW: Hilfestellung beim Verwirklichen von Design

Schau dir mal diese beiden Websites an:

Stichpunkt CSS: Layout ohne Tabellen

Templates » CSS INTENSIVSTATION

Da werden verschiedene CSS-Layouts exemplarisch vorgestellt. Wenn da eines dabei ist, das deinen Vorstellung gut entspricht, kann man es noch anpassen

muddern · 26. Oktober 2010

AW: Hilfestellung beim Verwirklichen von Design

Damit komm ich leider nicht weiter, da ich soviele andere Elemente noch habe, wie zum Beispiel die Buttons, die ich nicht mehr hinbekomme.

Habe es geschafft, dass ich oben und unten die weiße Leiste mit dem blauen Strich habe, ich schaffe es aber nicht meine Buttons da rein zu bringen und mein Content bekomm ich auch nicht hin

Kann mir da wer helfen ?

leex · 26. Oktober 2010

AW: Hilfestellung beim Verwirklichen von Design

poste doch mal was du schon hast .... design bilder code etc ... oder schicks mir per pn (zip,rar,etc pls).... dann schau ichs mir mal an und helf dir wenn ich zeit hab ;-)

_zippo^ · 27. Oktober 2010

AW: Hilfestellung beim Verwirklichen von Design

sollte im grundgerüst das darstellen was du möchtest:

HTML:

<div id="head">a</div>
<div id="main">b</div>
<div id="footer">c</div>

HTML:

css:
#head{
width:100%;
height:deine höhe halt;
border-bottom: 1px solid #blauer-hexwert;
margin-bottom:20px;
}

#main{
margin:0 auto;
width:50px;
height:200px;
}

#footer{
margin-top:20px;
width:100%;
height:deine höhe;
border-top:1px solid #blauer-hexwert;
}

https://www.xup.in/pic,21149971/test.png

haggix · 28. Oktober 2010

AW: Hilfestellung beim Verwirklichen von Design

Also ich habe dein Bild wie folgt aufgeteilt, oben 809px * 70 px, dann hab ich aus der mitte einen streifen ausgeschnitten, 809px*1px und für den footer von unten 809px*50px
Wenn du für die mitte nur 1px höhe verwendest sparst du ein wenig traffic

In Firefox 3.6 und IE 8.0 wurde es bei mir korrekt dargestellt. Achja rechts oben in der Ecke wird habe ich einen kleinen Anzeigefehler

Dein Grundgerüst, viel Spaß damit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
 <div id="allContent" name="allContent">
 <div id="headerBanner" name="headerBanner"><!-- Hier steht nichts :) Außer du willst es so --></div>
 <div id="mainContent" name="mainContent">
 <div id="text1" name="text1"><h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 </div>
 <div id="footer" name="footer">Hier steht sowas wie impressum, kontakt etc.</div>
 </div>
</body>
</html>

CSS-Teil

Code:

--Hintergrundfarbe, Schriftart und -größe festlegen
body{
 background-color: #7c7d7f;
 font-family: Verdana;
 font-size: 12px;
}
--Container für den gesamten Inhalt
#allContent{
 width: 809px;
 margin: 0 auto;
}
--Untercontainer für Header Content und Footer
#headerBanner{
 width: 100%;
 height: 70px;
 float: left;
 background-image: url("sunshinebearspreview-top.jpg");
}

#mainContent{
 padding-top: 20px;
 padding-left: 20px;
 padding-right: 20px;
 width: 100%-40px;
 background-image: url("sunshinebearspreview-middle.jpg");
 
}

#footer{
 padding-top: 20px;
 padding-left: 20px;
 padding-right: 20px;
 width: 100%-40px;
 height: 30px;
 background-image: url("sunshinebearspreview-bottom.jpg");
}

Nützliche Suchen

[CSS] Hilfestellung beim Verwirklichen von Design

Videos zum Themenbereich