Ich baue eine Homepage

sud7even · 05.07.2016

Hallo liebe Community,

wie das Thema schon sagt, baue ich gerade eine Homepage. Als erstes habe ich mir auf einem Blatt die Struktur aufgemalt. Zu Anfang wollte ich die Webseite in Photoshop entwerfen, wie ich es früher gemacht habe. Damals habe ich allerdings mit Tabellen gearbeitet und dann das komplette Layout quasi zerstückelt und in Dreamweaver in den Tabellenzeilen- und Spalten als Hintergrundgrafik eingefügt und mit Pixelangaben gearbeitet.

Nun möchte ich aber, dass die Breite der Webseite den gesamten Browserinhalt ausfüllt. Darum habe ich gesagt: width: 100%;

Ich habe mich u.a. vom Seitenaufbau von http://www.kulturbanause.de inspirieren lassen.

Meine Seite ist in Abschnitte untereinander aufgegliedert: Headbereich mit 1.) "Kopfzeile (zwei div-Container für kleines "Banner" & zwei bis drei Textlinks zum Blog etc.), 2.) Navigation, 3. Sektion "Deckblatt" (zwei div-Container für Logo/Wappen & Slideshow), 4. Sektion "Vorschau" (Kurzvorstellung), 5. Sektion "Termine" (zwei div-Container für diverse Termine & Veranstaltungen), 6. Sektion "Kontakt" (drei div-Container für ein Bild, Anschrift des Unternehmens & Soziale Medien), 7. Footer (drei div-Container für zwei bis drei Textlinks, ein Bild & Copyright-Hinweis).

Ich habe nun folgendes Problem: Zum Testen habe ich in der Sektion "Vorschau" nun im HTML-Quellcode etwas hineingeschrieben, aber dann steht der Text direkt oben an der Grenze vom Abschnitt und ebenso direkt links im Browser. Das ist mir auch einleuchtend, da in der CSS ja gar keine Anweisung gegeben ist, damit der Text eingerückt wird. Also habe ich in der CSS nun padding: 20px; gemacht. Der Text wird nun zwar eingerückt, wie ich es will, aber das Problem ist jetzt: Der ganze Abschnitt erweitert sich scheinbar nach rechts und nach unten um eben diese 20 Pixel. Wenn ich z.B. anweise, dass padding: 5%; gemacht werden soll, passiert dasselbe.

Kann mir da jemand Hilfestellung geben, damit sich die Abschnitte nicht um dieses Padding gleichzeitig erweitern?

Beste Grüße!

PS. Ist das ok, wenn ich bei Fragen (die sicherlich verhäuft auftreten), diese hier immer stelle? So muss ich nicht immer ein neues Thema aufmachen, falls ich keine Antworten finde. Manchmal weiß man ja auch nicht, wonach man als Anfänger suchen muss.

Dobi78 · 05.07.2016

sud7even schrieb:
PS. Ist das ok, wenn ich bei Fragen (die sicherlich verhäuft auftreten), diese hier immer stelle? So muss ich nicht immer ein neues Thema aufmachen, falls ich keine Antworten finde. Manchmal weiß man ja auch nicht, wonach man als Anfänger suchen muss.

Sofern es nicht vom Thema abweicht und zu deiner Seite gehört... ja bitte.

Es wäre für uns alle hilfreich, wenn Du auch den Quellcode mitlieferst. Für mich hört sich das so an, als fehlen die weitere Container /div. und du nur einen erstellt hast.

Myhar · 05.07.2016

Generell gilt: CSS ist ohne HTML sinnlos (und umgekehrt). Auch für Anfänger oft schwer verständlich: Manche Eigenschaften werden vererbt, andere wirken an zweiter Stelle, etc... Deshalb bringt es nix, wenn du sagst, was du wo gemacht hast. Da gibt es zu viele Fehlerquellen.

sud7even · 05.07.2016

Dobi78 schrieb:
Sofern es nicht vom Thema abweicht und zu deiner Seite gehört... ja bitte.

Ja, natürlich

Es wäre für uns alle hilfreich, wenn Du auch den Quellcode mitlieferst. Für mich hört sich das so an, als fehlen die weitere Container /div. und du nur einen erstellt hast.

HTML-Code index.html

HTML:

<!doctype html>
<html>
<head>

<title>Titel der Seite</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="index, follow">
<meta name="author" content="Name">
<meta name="creator" content="Name">
<meta name="publisher" content="Name">
<meta name="description" content="Beschreibung">

<link rel="stylesheet" type="text/css" href="css/style.css" title="Basis-Stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">

</head>
<body>

    <header>
        <div id="banner">
       
            Kleines Banner als Blickfang
       
        </div>
       
        <div id="up-menue">
       
            Blog - Shop als Textlink
           
        </div>
       
        <nav>
           Horizontale Dropdown-Navigation
        </nav>
    </header>
   
    <section id="title">
        <div id="logo">
           Logo/Wappen
        </div>
       
        <div id="slideshow">
           Slideshow
        </div>
    </section>
   
    <section id="preview">
   
            <h1>Überschrift für Kurzvorstellung</h1>
           
            <article>
           
            Text der Kurzvorstellung
           
            </article>
   
    </section>
   
    <section id="dates">
       Abschnitt für Termine, ggf. zwei Container
    </section>
   
    <section id="overview">
        <div id="image-socialmedia">
           Bild Social Media & Kontakt
        </div>
       
        <div id="quick-contact">
       
            <p>Name</p>
            <p>Straße</p>
            <p>Etc.</p>
       
        </div>
       
        <div id="socialmedia">

        <p>Unternehmen auf Facebook</p>
        <p>Etc.</p>
       
        </div>
    </section>
   
    <footer>
        <div id="menue-down">
       
            Kontakt - Impressum als Textlink
       
        </div>
       
        <div id="raute">

        Bild
       
        </div>
       
        <div id="copyright">
            Copyright &copy; 2016 Semper Fi Brema
        </div>
    </footer>

</body>
</html>

CSS-Datei style.css

CSS:

/**
* @author        Name
* @package        Name
* @link        Internetadresse
* @email        E-Mail
* @copyright    Copyright-Information
*
**/

/* *************** ALLGEMEINE FORMATIERUNGEN ***************
************************************************************/

*{
    margin: 0px;
    padding: 0px;
}

html, body{
    font-family: 'Open Sans', sans-serif;
}

/* *************** LAYOUT **********************************
************************************************************/

header{
    width: 100%;
    height: 135px;
    background-color: #050505;
    color: #FFFFFF;
}

#banner{
    width: 70%;
    height: 75px;
    float: left;
}

#up-menue{
    width: 30%;
    height: 75px;
    float: left;
}

#title{
    width: 100%;
    height: 384px;
    background-image: url(../images/bg.jpg);
}

#logo{
    width: 35%;
    height: 384px;
    float: left;
}

#slideshow{
    width: 65%;
    height: 384px;
    float: left;
}

#preview{
    width: 100%;
    height: 500px;
    background-color: #00361C;
    font-family: 'Droid Serif', serif;
    color: #FFFFFF
}

#dates{
    width: 100%;
    height: 350px;
    color: #000000;
}

#overview{
    width: 100%;
    height: 200px;
    background-color: #006D38;
    color: #FFFFFF;
}

#image-socialmedia{
    width: 40%;
    height: 200px;
    float: left;
}

#quick-contact{
    width: 30%;
    height: 200px;
    float: left;
}

#socialmedia{
    width: 30%;
    height: 200px;
    float: left;
}

footer{
    width: 100%;
    height: 75px;
    background-color: #00361C;
    color: #FFFFFF;
    font-size: 14px;
}

#menue-down{
    width: 30%;
    height: 75px;
    float: left;
}

#raute{
    width: 40%;
    height: 75px;
    float: left;
}

#copyright{
    width: 30%;
    height: 75px;
    float: left;
}

/* *************** NAVIGATION ******************************
************************************************************/

nav{
    width: 100%;
    height: 60px;
    background-color: #090909;
    float: left;
}

Ich hoffe, damit kann man etwas anfangen. Ansonsten könnte ich die Seite irgendwo hochladen?

Beste Grüße!

Myhar · 05.07.2016

Dir fehlt noch das Grundwissen zum CSS Boxmodel, ohne dem wirst du nicht weit kommen (Ja es ist lästig sich das anzueignen, aber leider wichtig) Auch hilft dir box-sizing bestimmt weiter.

Schaddi · 06.07.2016

Wirf doch einmal einen Blick hier rauf:
Wohlmöglich wird es Dich inspirieren.

pemis · 06.07.2016

Was du mit den 20 Pixel Abstand erreichst,ist einfach ein Abstand zum Objekt von 20 Px von oben, 20 Px von rechts, 20 Px von unten und 20 Px von links. wenn du nur den Abstand von links haben willst genügt des padding left: 20px.

sud7even · 08.07.2016

Danke schon mal für die Antworten. Ich melde mich sobald ich alles ausprobiert habe