Design CSS

dice · 07.06.2010, 20:43

Hallo,
bin neu und hoffe auch richtig hier.

Kann mir villt. jemand behilflich sein und zwar würde ich gern wissen wie man mit CSS so was gestaltet,suche schon seit tagen verzweifelt.

http://www.tutorials.de/forum/attach...m-01.03.48.jpg

Also diese aufgesetzte Seite auf den Hintergrund,villt. hat ja jemand ein Tut für mich oder sowas.

Vielen Dank schon mal im vorraus.

LG

Flor1an · 07.06.2010, 20:48

Eigentlich relativ einfach. Der Hintergrund wird sehr wahrscheinlich einfach ein Hintergrund Bild des <body> Tags sein. Und die Seite darauf einfach eine DIV Box die entsprechend breit und mittig positioniert wurde.

Dafür brauchts denke ich kein konkretes Tutorial.

nikosch · 07.06.2010, 21:24

Design != Layout != Software Design!

Software Design
Layout
Design

[MOD: verschoben]

halskrause · 07.06.2010, 23:22

So würde ich es machen..

PHP-Code:

  <body style="width:1000px;height:1000px">
    <div id="mittig" style="width:800px; height:600px; margin-left:auto;margin-right:auto">
       usw......
    </div><!-- e o center -->
</body>

ByStones · 09.06.2010, 12:11

Zitat:

Zitat von halskrause

So würde ich es machen..

PHP-Code:

  <body style="width:1000px;height:1000px">

    <div id="mittig" style="width:800px; height:600px; margin-left:auto;margin-right:auto">

       usw......

    </div><!-- e o center -->

</body>

Warum ? Andere Auflösung, z.B 1920 dann siehts bei dir komisch aus...

Einfach das Hintergrunbild mit repeat vesehen und dann die box mit margin:0 auto mittig machen.

Destruction · 09.06.2010, 15:49

Zitat:

Zitat von ByStones

Warum ? Andere Auflösung, z.B 1920 dann siehts bei dir komisch aus...

Einfach das Hintergrunbild mit repeat vesehen und dann die box mit margin:0 auto mittig machen.

Außerdem verstehe ich net ganz warum du eine id zuweist und dann noch mal den Quelltext mit style vollstopfen willst

12.06.2010, 12:49

Hier, index.php zB:

PHP-Code:

  <html>

<head>

    <title>Dein Titel</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="main"> //Container der alles hält

 
<div id="head"></div> //Logo oben

 
<div id="navi">  //Navigation

 <a hreF="#">Startseite</a>

</div>  

 
<div id="content">

Textfeld bla bla

</div>

 
</div> //Container ende

</body>

Die style.css Datei zB:

PHP-Code:

  body{

 color: #000;

 font-family: Veranda;

 background: #f7f7f7;

 margin: 0;

}

#main{

 margin: 0 auto;

 width: 800px;

 border: 1px solid blue;

 padding: 5px;

}

 
#head{

 width: 800px;

 height: 80px;

 background: #eee url(url zum logo) center top;

}

 
#navi{

 width: 800px;

 height: 22px;

 background: blue;

 line-height: 20px;

}

#navi a{

 color: #222;

 text-decoration: none;

 padding: 5px;

}

 
#content{

 width: 800px;

 min-height: 300px;

 color: #000;

}

Den ersteen Code in eine index.html oder php Datei einfügen und den 2. Code
in eine style.css Datei einfügen.

Is jetzt so hingeschrieben, darum so knapp.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Design erstellen ?	MrFreaky	PHP Tipps 2008	2	29.09.2008 11:20
Design Pattern	Harry B.	Software-Design	7	02.09.2008 20:49
Design und Code Trennen	TeazY	PHP Tipps 2008	29	21.05.2008 12:08
Scrollleiste im design berücksichtigen	Crypi	HTML, Usability und Barrierefreiheit	5	16.01.2006 08:10
Design...		Off-Topic Diskussionen	8	29.09.2005 10:01
design mittig halten	Niedi	HTML, Usability und Barrierefreiheit	10	28.08.2005 15:50
Design		Beitragsarchiv	26	04.06.2005 20:56
[PHP] Design Schutz für ein Gästebuch	I-Spy	PHP Tipps 2005	5	01.01.2005 11:25
Mit Sessionen das Design wählen lassen.		PHP Tipps 2004-2	8	28.12.2004 08:30

07.06.2010, 20:43
dice Neuer Benutzer Registriert seit: 07.06.2010 Beiträge: 1 PHP-Kenntnisse: Fortgeschritten	Design CSS Hallo, bin neu und hoffe auch richtig hier. Kann mir villt. jemand behilflich sein und zwar würde ich gern wissen wie man mit CSS so was gestaltet,suche schon seit tagen verzweifelt. http://www.tutorials.de/forum/attach...m-01.03.48.jpg Also diese aufgesetzte Seite auf den Hintergrund,villt. hat ja jemand ein Tut für mich oder sowas. Vielen Dank schon mal im vorraus. LG


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.06.2010, 20:48
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Eigentlich relativ einfach. Der Hintergrund wird sehr wahrscheinlich einfach ein Hintergrund Bild des <body> Tags sein. Und die Seite darauf einfach eine DIV Box die entsprechend breit und mittig positioniert wurde. Dafür brauchts denke ich kein konkretes Tutorial.

07.06.2010, 21:24
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Design != Layout != Software Design! Software Design Layout Design [MOD: verschoben] __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.06.2010, 23:22
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	So würde ich es machen.. PHP-Code: `<body style="width:1000px;height:1000px"> <div id="mittig" style="width:800px; height:600px; margin-left:auto;margin-right:auto"> usw...... </div><!-- e o center --> </body>`

12.06.2010, 12:49
Nokes Gast Beiträge: n/a	Hier, index.php zB: PHP-Code: `<html> <head> <title>Dein Titel</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> //Container der alles hält <div id="head"></div> //Logo oben <div id="navi"> //Navigation <a hreF="#">Startseite</a> </div> <div id="content"> Textfeld bla bla </div> </div> //Container ende </body>` Die style.css Datei zB: PHP-Code: `body{ color: #000; font-family: Veranda; background: #f7f7f7; margin: 0; } #main{ margin: 0 auto; width: 800px; border: 1px solid blue; padding: 5px; } #head{ width: 800px; height: 80px; background: #eee url(url zum logo) center top; } #navi{ width: 800px; height: 22px; background: blue; line-height: 20px; } #navi a{ color: #222; text-decoration: none; padding: 5px; } #content{ width: 800px; min-height: 300px; color: #000; }` Den ersteen Code in eine index.html oder php Datei einfügen und den 2. Code in eine style.css Datei einfügen. Is jetzt so hingeschrieben, darum so knapp.