Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Ich baue eine Homepage“

S

sud7even

Guest

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

Wen interessiert's?

PSD Beta Team
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

Hat es drauf

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.
 
S

sud7even

Guest

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!
 
P

pemis

Guest

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.
 
S

sud7even

Guest

Danke schon mal für die Antworten. Ich melde mich sobald ich alles ausprobiert habe :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben