✔ 3 Boxen

P3lusa

P3lusa

Grünschnabel
Hallo erst mal,

ich habe großes Interesse Css zu erlernen, aber ich schaffe das nicht alleine.
Was macht man da -- man Google.

Ich habe Euch darin gefunden und nun bin I da.

Ich habe eine Webseite gebastelt und möchte nun dazu einen Css spript entwerfen.

was ich bisher habe ist dies
CSS: 
# Container {
width: 800px;
padding: 0px;
#spalte_links { position:absolute; top:155px; left:5px; min-width:150px; z-index:1; }
#spalte_mitte { position:absolute; top:155px; margin-left:5px; width:60%;z-index:1; }
#spalte_rechts { position:absolute; top:155px; margin-left:5px; min-width:150px; z-index:1; }
<div id="spalte_links">fdhf</div>
<div id="spalte_mitte">
<div id="mitte">fdh</div>
</div>
<div id="spalte_rechts">lhg</div>
die seite selber soll 3 boxen haben.. oben , links und mitte.

Die Seite soll so aussehen mal :
indexdanielatqfg6.png


Ich habe jetzt im Forum herumgesucht.. aber ich weiß gar nicht wo ich anfangen soll.

Kann mir wer einen Rat geben wo ich beginnen soll? LG
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
herzliche Willkommen im Forum!

Als erstes entferne das Leerzeichen bei #Container und schließe diese ID mit einem }.
Dann hat dein Code so garnichts damit zu tun was du aufbauen willst, hier sehe ich ein dreispaltiges Layout und keines mit Header und zwei Spalten, Nungut lassen wir das mal so stehen.

Nur als Erklärung, die absolute Positionierung der #spalte_ und die vergebenen z-indizes sind unnötig und werden dir später sehr viel Ärger einbringen da du die Grundspalten aus dem eigentlichen Zeilenfluss genommen hast. Hier wäre ein einfaches floating besser geeignet.

Vorlagen für ein CSS Layout gibt es im Web genug:
https://www.google.de/search?q=css+...j7&sourceid=chrome&espv=210&es_sm=91&ie=UTF-8

Grüße
 
Dankeschön Jan, was ich einfach checken möchte, ist, wie ich es
schreiben soll aller Anfang ist schwer, aber es interessiert mich nun mal. :) JavaScript
in Frontpage fand ich einfacher, aber ich möchte weg davon.

Ich habe ich nun um ein Grundgerüst gekümmert. Ich möchte nun in die Boxen die Images anpassen.
Geht das einfach so?
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="Description" content="Photografic"/>
<meta name="Keywords" content="new Fotoshooting"/> 
<meta name="author" content=""/> 
<meta name="ROBOTS" content="index,follow" />
<title>Highlights Photografic</title>

<style type="text/css">
<!--

html {min-height: 100%;}

* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {

}

.clearer {clear: both; font-size: 0;}
.left {float: left;}

.inner-container {
border: 1px solid #000000;
background: #FFF; 
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 970px;
margin-top: 8px;
}

.outer-container {
padding-bottom: 14px;

}

.header {
border: 1px solid #000000;
height: 160px;
margin-bottom: 5px;
background-color: #FFCC00;
}

.content {
border: 1px solid #000000;
float: right;
width: 745px;
height: 450px;
background-color: #FFFFCC;
margin-top: 8px;
}

.navigation {
border: 1px solid #000000;
float: left;
width: 210px;
height: 450px;
margin-top: 8px;
background-color: #666666;
}

.footer {
border: 1px solid #000000;
color: #000000;
margin-top: 8px;
padding: 2px 4px;
}
.footer a {
color: #000000;
text-decoration: none;
}

-->
</style>
</head>

<body>

<div class="outer-container">

<div class="inner-container">

<div class="header">
<h1>Header</h1>
</div>

<div class="content">
<h1>Content</h1>
</div>

<div class="navigation">
<h1>Menu</h1>
</div>

<div class="clearer"></div>

<div class="footer">
<span class="left">
<a href="">Fuss für Impressum e.c</a>. 
</span>
<div class="clearer"></div>
</div>

</div>

</div>

</body>
</html>


LG
 
Zuletzt bearbeitet von einem Moderator:
hay Jan, da fragst du was. Ich weiß das php so beginnt <?php
/* javascript mit einem <--DOC teil und css mit einer # oder.
öpö
Eigentlich bin ich ja eher der Grafiker, aber einer Freundin habe ich versprochen Ihr eine HP zu erstellen. Da es mich selber interessiert wollte ich mit css beginnen. Dann weiter vor arbeiten *g
 
zum Grundgerüst habe ich mir gedacht , wenn ich das habe könnte ich doch die Grafik so zerlegen das sie angepasst wird -
ohnebilderfuwu6.jpg


zu - >
mitbildergkv0s.jpg


habe mir nun diesen Sheet dazu erstellt.. aber klappt nicht :(

sheetqmzva.jpg


hmm ginge das denn überhaupt so**** LG
 
Hi,
da ich grad weg muss erstmal kurz ja das geht weitgehendst.
So ich hab dir das mal mit deinen Bildern versehen. Funktioniert einwandfrei. Außer das du die breite des Contentbereiches etwas zu groß gemacht hast, aber das lässt sich ja leicht anpassen.

http://jsbin.com/iMAjipEG/4/edit
(Falls die Hintergrundgrafiken nicht angezeigt werden einfach erneut „Run with JS“ drücken).

Gruß
 
Das ist ja cool von Dir... Thx...
da habe ich aber eine menge nicht geschrieben.. hehe danke danke.. das muß ich mir genauer anschauen, damit ich das bald selber kann..
image50edrvb.jpg
LG
 
Zuletzt bearbeitet:
Ich weiß das php so beginnt <?php
/* javascript mit einem <--DOC teil und css mit einer # oder.
öpö
Zum Vergrößern anklicken....
Falls du mit der ganzen Sache eigentlich nichts zu tun haben willst
und lieber bei Grafik bleibst...ok
Aber sonst: Leg die Sache ein paar Jahre aufs Eis und lern es gründlich.
Nur ein gut gemeinter Rat. Sonst wirst du außer Frust nichts bekommen.
 
Danke für deine Antwort. Du schreibst lerne es gründlich, wo kann man dass denn? Kennst Du vielleicht ein kostenlosen Onlinekurs? Würde ich gerne machen. Ich habe leider nicht das Geld mir viele Bücher zu kaufen.

Ich hoffe seit Gut ins neue Jahr gekommen.

# p3lusa #
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück