• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Rand um HP?!

tarik02

tarik02

Mitglied
Hi,

ich beschäftige mich gerade ein bisschen mit CSS und hab mal ne Frage:
Wie bekommt man so einen (wie bei dieser Website:Icybook - Das Gästebuch für jedermann!(der graue Rand)) hin?
Naja... wie schon gesagt ich beschäftige mich noch nicht solange mit CSS also bitte meine unswisseheit entschuldigen ;ugl


Mfg tarik02
 
ja und weiter?
Hatte ich gemacht...

so sieht meine CSS datei aus jedenfalls die vom body:

Code: 
body
{
background-color:  #FCF7CF;
font-family:Arial, Verdana, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin:    0;
padding: 0;
}
 
Jetzt kannst du deinen Inhalt in einem <div> zentrieren, indem du ihm eine feste breite gibst und margin: 0 auto;
 
Irgetnwie klappts noch nich...

Meine HTML -Datei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Index</title>
<style type="text/css">
</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Inhalt">
<p> Plathalter</p>
</div>

</body>
</html>


CSS-datei:

Code: 
body
{
background-color:  #FCF7CF;
font-family:Arial, Verdana, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin:    0;
padding: 0;
}

h1
{
color: red ;
text-align: center;
text-decoration: overline underline;

}


#bereich 
{
  padding:5%; border 10px solid #66a;
  width:280px;
  voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
  voice-family:inherit;
  width:100%;
}

img 
{
border: 10px solid lightblue;
width:  10% ; 
}

Logo
{
border: 10px solid lightblue;
width:  10% ; 
background-color="blue";
}




div id="Inhalt"
{
background-color:  red;
font-family:Arial, Verdana, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin:    0;
padding: 0;
aligen: center ;
}

woran liegts?
 
es liegt daran, dass du deine id in css nicht richtig ansprichst.

wenn du schreibst:

<div id="inhalt">
</div>

dann schreibst du in css:

#inhalt{
}

wenn du schreibst:

<div class="inhalt"> <= hier nicht logisch, da diese klasse wohl nur 1mal auf dieser seite vorkommen wird. deshalb nutzt man da id)
</div>

dann schreibst du in css:

.inhalt{
}

ids werden also mit einer raute (#) angesprochen und klassen mit einem punkt (.)

alles klar?

grüße hokage
 
wahrschinlich fang ich langsam an zu nerven... aber gut :razz:
nun sieht CSS zwar so aus:
Code: 
div#Inhalt
{
background-color: red;
font-family:Arial, Verdana, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin:    0;
padding: 0;
aligen: center ;
margin: 0 auto;
}
Aber der Platzhalter (einfache Schrift) wird nicht angezeigt noch die Hintergrundfarbe...:cry:
 
Machs mal so:

PHP: 
<body>
  <p>Lorem Ipsum bla bla bla.</p>
</body>
Code: 
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #FCF7CF;
  height: 100%;
}

p {
  width: 50%;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid black;
}

Ist ungetestet, sollte aber funktionieren.
 
so und jetzt ersätze thors p noch durch dein div#Inhalt oder einfach nur #Inhalt und es ist so, wie du es wolltest ;-)

grüße hokage
 
So als erstes einmal an alle ein großes großes DANKE!!! :mrgreen:
Nun kommt aber (ich hoffe es) wohl meine allerletzte frage jedenfalls heute
wie bekomm ich die nu zentriert die sind nämlich jetzt untereinander...
Nun.. ich habs mit aligen probiert was logischerweise danaben gegenagen ist:razz:
Mit welchem <Tag> gehts denn dann?
 
1.frage: was verstehst du unter "untereinander"?
möchtest du das ganze auch noch mit einem oberen und unteren rand versehen?
dann musst du dementsprechend margin-top: 10%; und margin-bottom:10%; angeben

ansonsten verstehe ich grad nicht was du meinst ;-)

grüße hokage
 
hokage555 schrieb:
1.frage: was verstehst du unter "untereinander"?
möchtest du das ganze auch noch mit einem oberen und unteren rand versehen?
dann musst du dementsprechend margin-top: 10%; und margin-bottom:10%; angeben

ansonsten verstehe ich grad nicht was du meinst ;-)

grüße hokage
Zum Vergrößern anklicken....

zu 1. Mit untereinander verstehe ich dass: Nämlich wenn z.B. Die Navigations <div> unter dem Inhalts <div> ist, aber eigentlich möchte ich die Navigation ja links:razz: (war nur ein beispiel)

zu 2. ich möchte das unten kein Platz bleibt und nach oben möcht ich den header... ;)

Edit:Hab's geschafft :D Danke für Eure hilfe!!!!!



Mfg Tarik02
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben