Allgemeine Hilfe bei Webseitengestaltung

-SK- · 12 Januar 2014

Moin Moin

ich bin gerade dabei, eine Webvisitenkarte zu erstellen. Bin gerade bei der Programmierung und es kommen immer wieder Komplikationen auf mich zu. Alleine wird das daher nur ein heupriger Weg bis zum Endprodukt, also hoffe ich das ihr mir im Verlauf der Programmierung weiterhelfen könnt, eine vollfunktionstüchtige Webseite zu erstellen, welche man mit Stolz präsentieren kann.

ich hab die Webseite schon mal hochgeladen: Klick Mich !

Bei mir wird sie soweit ordentlich angezeigt. Doch ich hab schon von freunden gehört, dass sie seitwärts scrollen können, was eigentlich nicht passieren soll. die Webseite soll auf jedm Bildschirm genau angezeigt werden. Ich will nicht das gescrollt werden muss.
Außerdem wurde mir gesagt, dass die Vertikale NaviBar irgendwann aufhört. die Soll aber eigentlich bis zum unteren Fensterrand gehen und sich mit dem Content erweitern.
Außerdem soll das Copyright Text eigentlich unten (quasi im imaginären footer) sein, wusste aber nicht genau wie ich das umsetzen soll. All meine versuche schlugen fehl.

Bei diesen Punkten würde ich gerne Rat von euch bekommen.
Quellcode:

HTML:

Code:

<!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=utf-8" />
<title>Serhat K&ouml;yl&uuml;ce - Webvisitenkarte</title>
<link rel="icon" href="images/icon.ico" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>

<div id="balken1"></div>
<div id="logo"></div>
<div id="balken2">

<div id="navigation">
<p><a href="index.html">Startseite</a></p>
<p><a href="#">Arbeiten</a></p>
<p><a href="#">&Uuml;ber mich</a></p>
<p><a href="#">Kontakt</a></p>
<p><a href="#">Impressum</a></p>
<div id="footer"><p>&copy; Serhat K&ouml;yl&uuml;ce</p>
</div>

</div>
</div>
<div id="content">

<h1>Willkommen</h1>

<p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks </p>

</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS for Serhat Köylüce */

a:link { color: white; text-decoration:none; }
a:visited { color: white; text-decoration:none; }
a:hover { color: #781917; text-decoration:none;}
a:active { color: white; text-decoration:none; }
a:focus { color: white; text-decoration:none; }

html, body{
color: black;
background: url(../images/bg.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
font-family: Verdana, Arial;
font-size: small;
height:auto;
width:276px;
}

#logo {
background:url(../images/sklogo.png) no-repeat;
width:276px;
height:113px;
margin-left:250px;
margin-top:45px;
position:relative;
}

#balken1 {
background-color:#781917;
width:50px;
height: auto;
position:absolute;
bottom:0;
top:0;
color:white;
font-family:arial;
font-weight:bold;
margin-left:250px;
}

#balken2 {
background:url(../images/navibg.png) repeat;
width:225px;
height: auto;
position:absolute;
bottom:0;
top:0;
color:white;
font-family:arial;
font-weight:bold;
margin-left:300px;
}

#navigation {
color:white;
font-size:16px;
font-family:arial;
font-weight:bold;
padding-top:270px;
padding-left:5px;
}

#footer {
color:white;
font-size:12px;
font-weight:bold;
}

#content {
background:url(../images/navibg.png) repeat;
width:850px;
height:450px;
color:white;
margin-left:600px;
margin-top:120px;
padding:20px;
}

threadi · 13 Januar 2014

Was Du schreibst was deine Webseite soll und was sie tatsächlich macht sind durchaus unterschiedlich. Du hast z.B. deinem Content eine Breite von 850px und einen Abstand nach links von 600px gegeben - ein Viewport, der das darstellen soll muss also mindestens 1450px breit sein - eher sogar noch mehr, weil Du auch beim body noch einen Abstand eingebaut hast. So kann deine Webseite nur auf Viewports mit gigantischer Breite ohne Scrollbalken dargestellt werden.

Wenn Du etwas anderes willst, dann musst Du das auch in deinem Code einbauen. Was die Breite angeht, könntest Du dich für kleinere Abstände entscheiden um zumindest einen Mindestviewport von 1024 zu unterstützen. Damit berücksichtigst Du dann lediglich mobile Geräte nicht, die durchaus noch kleinere Viewports haben. Informiere dich am besten über responsive Design.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.

Allgemeine Hilfe bei Webseitengestaltung

-SK-

Neues Mitglied

threadi

Moderator

Neueste Beiträge