Hilfe beim Bearbeiten meiner HP (CSS&HTML)

Kralinho · #1 (**permalink**) 15.02.2010, 11:17

Hallo,

ich bin ziemlich neu hier

. Ich habe schon länger nach Lösungen im Inet gesucht, aber nichts brauchbares gefunden.
Also erstens habe ich probleme bei der Darstellung von einigen Vorstellungen, wie meine HP aussehen soll.
Ich habe dafür erst eine Skitze erstellt nur das Realisieren fällt mir schwer und sicher habe ich viele Fehler in meinem CSS-Script, die umständlich zeigen. Aber ich bin immer noch ein Laie und bräuchte hilfe.
Kann da jemand vllt mal drüber schauen und sagen, was besser gemacht werden kann?

Ich weis auch nicht wie ich euch das zeigen kann, was ich bis jetzt gemacht habe. Ich kann höchstens eine Screens schießen und sie hier rein machen.
(Ich habe nämlich keinen anbieter gefunden, bei dem ich mein Scripte einfügen kann und es funktioniert).

Ich hoffe, dass jemand genug Zeit für mich mitbringt und mir helfen kann.

PS: Vllt würde ICQ o.ä. bei der Verständigung helfen.

Anlagen:
-so sollte die HP ungefähr aussehen:
http://img130.imageshack.us/img130/6493/vorlage3.jpg
-so sieht sie bei mir aus wenn ich sie einfach mit firefox öffne
http://img3.imageshack.us/img3/2779/88425900.jpg
-so sieht mein html doc aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine Homepage</title>
<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="content">
<div id="ucontent">

<h2>Meine Homepage</h2>

</div>

<div id="wucontent">

</div>

</div> 

<div id="navi">

<ul>
<li> <a href="index1.html">Home</a> </li>
<li> <a href="index.html">Ich</a> </li>
<li> <a href="musik.html">Musik</a> </li>
<li> <a href="seite3.html">Home</a> </li>
<li> <a href="seite4.html">Home</a> </li>
<li> <a href="seite5.html">Home</a> </li>

</ul>

</div> 

<div id="unten">
<div id="unavi">

<ul>
<li> <a href="index.html">ICH</a> </li>
<li> <a href="jane.html">Meine Freundin</a> </li>
<li> <a href="freunde.html">Meine Freunde</a> </li>
<li> <a href="fam.html">meine Familie</a> </li>
<li> <a href="pics.html">Bilder</a> </li>
<li> <a href="seite5.html">CSS Teil 5</a> </li>
<li> <a href="seite6.html">CSS Teil 6</a> </li>
</ul>

</div> 
<div id="links">
<ul>
<li> <a href="www.knuddels.de/homepgae"><img src="HAF-00011_thumb.jpg"></a> </li>
<li> <a href="www.mulogsworld.de"><img src="mulogsworld1.JPG"></a> </li>
<li> <a href="www.burgazworld.de"><img src="asdfasd4.JPG"></a> </li>
</ul>

</div> 

</div> 

</body>
</html>

- und so mein css-skript
body
{
background-color: red;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

h1
{
color: #000080;
text-align: center;
text-decoration: underline;
}

h2
{
color: red;
text-align: center;
}

#navi
{
background-color: black;
width: 300px;
height: 170px;
margin-left: 110px;
margin-top: 40px;
margin right: 0px;
font-size: 0,9em;
font-weight: bold;
border: red;
/*display: inline; */
/* height: 400px;; border: 1px solid #000080*/
}

#navi ul
{
margin: 50px;
padding: 0;
list-style-type: none;
}

#navi ul, li
{
float: left;
}

#navi a
{
display: block;
padding: 5px;
width: 50px; /*--wichtig für den IE6--*/
text-decoration: none;
background-color: black;
border: 1px solid red;
}

#navi a:link
{
color: red;
}

#navi a:visited
{
color: red;
background-color: black;
}

#navi a:hover
{
color: #FFCC00;
background-color: #0000CD;
}

#navi a:active
{
color: #000080;
background-color: #0000CD;
}

#links
{
width: 300;
border:green;
}

#unten
{
margin-top: 20px;
margin-left: 110px;
background-color:black;
width:300px;
height:500px;
}

#unten ul, li
{
float: left;
}

#unavi
{
background-color:black;
width: 300px;
height: 300px;
margin-top: 20px;
font-size: 0,9em;
/*display: inline; */
/* height: 400px;; border: 1px solid #000080*/
}

#unavi ul
{
margin-top: 50px;
margin-left: 30px;
padding: 0;
list-style-type: none;
}

#unavi a
{
display: block;

padding: 5px;
width: 230px; /*--wichtig für den IE6--*/
text-decoration: none;
background-color: red;

font-weight: bold;
}

#unavi a:link
{
color: black;
}

#unavi a:visited
{
color: #F00;
background-color: #C1CDCD;
}

#unavi a:hover
{
color: #FFCC00;
background-color: #0000CD;
}

#unavi a:active
{
color: #000080;
background-color: #0000CD;
}

#content
{
background-color: black;
border: 1px solid black;
width: 715px;
margin-right: 110px;
margin-top: 0px;
margin-left: 0px;
text-align: justify;
font-size: 1.1em;
line-height: 1.5em;
float: right;

}

#ucontent
{
background-color: red;
border: 1px solid red;
width: 607px;
margin-top: 30px;
margin-right: 53px;

float: right;
}

#ucontent h2
{
color: black;
}

#wucontent
{
background-color: red;
border: 1px solid red;
width: 607px;
margin: 20px;

float: right;
}

Duderinho · #2 (**permalink**) 15.02.2010, 11:45

Du würfelst ja alles durch einander, Prozentangaben, Pixelangaben, Angaben mit em (die Angaben werden mit Punkt, nicht mit Komma gemacht!).

Bei der Farbe gibst du mal "black" an, mal Hexadezimalcode, mal die Kurzschreibweise.

Bei einigen Pixelangaben fehlt das "px"

Überarbeite mal den Code und poste erneut.

Edit: DU hast generell viel zuviele Klassen, ich blick da nicht durch was du da alles zusammen definierst. Mach erstmal einen grundlegenden Aufbau und geh erstmal nicht auf "Feintuning" wie padding ein, erstell erstmal das grundlegende Design.

Kralinho · #3 (**permalink**) 15.02.2010, 13:48

Ok erst ein mal ein Danke schön, dass du geantwortet hast. Ich werde mir dein Rat zu herzen nehmen und danach das Script neu posten.

Duderinho · #4 (**permalink**) 15.02.2010, 14:40

Du hast die Links auch für die beiden Menüs extra definiert, das kannst du auch mit einmal für beides machen.

Kralinho · #5 (**permalink**) 15.02.2010, 15:22

wenn ich die links gleich definiere dann sehen die bei mir gleich aus und ich möchte ja das die menüs sich voneinander unterscheiden. oder kann man sie dann trotzdem unterschiedlich aussehen lassen?

ich habe jetzt ein wenig dran rumgemacht und sortiert. soll ich das jetzt auch schon so posten? hastd du vllt eine email adresse oder so damit ich dir das zukommen lassen kann?

Duderinho · #6 (**permalink**) 15.02.2010, 15:25

Nein, dann nicht, wäre mir zumindest nicht bekannt.

Aber willst du wirklich alles bunt und "durcheinander" haben - denk auch etwas an den Wiederkennungswert und intuitive Bedienung. Wenn alles anders aussieht muss sich der User erst wieder zurechtfinden.

Kralinho · #7 (**permalink**) 15.02.2010, 15:41

Ja da hast du recht. Ich mein ich habe jetzt nur noch drei Farben: rot, schwarz und weiß. Aber ich werde das ja noch vielen anderen von meinen Freunden zeigen und schauen wie sie sich zurecht finden.
Nicht das ich nicht auf dich hören will, aber es gefällt mir so eigentlich und ich bin auch für jeden Vor- und Ratschlag offen. Vor allem bin ich immer noch ein Laie da höre ich lieber auf dich als auf mein inneres

Der einzige unterschied, aber zwischen oben und unten ist ja dieser Farbenumdreher.
Außerdem finde ich das die Seite auch mehr pepp braucht. sieht ein bissl statisch aus.

nochmal der Code (hoffentlich gefällt er dir eher):

body
{
background-color: red;
font-family: Verdana, Arial, sans-serif;
}

h1
{
color: black;
text-align: center;
}

div
{
background-color: black;
}

a
{
display: block;
padding: 5px;
text-decoration: none;
}

#content
{
border: 1px solid black;
width: 715px;
margin-right: 110px;
float: right;
}

#ucontent
{
background-color: red;
border: 1px solid red;
width: 607px;
margin-top: 30px;
margin-right: 53px;
float: right;
}

#wucontent
{
background-color: red;
border: 1px solid red;
width: 607px;
margin-top: 30px;
margin-right: 53px;
float: right;
}

#navi
{
width: 300px;
height: 170px;
margin-left: 110px;
margin-top: 40px;
font-weight: bold;
}

#navi ul
{
margin: 50px 15px 0px 15px;
list-style-type: none;
}

ul, li
{
float: left;
}

#navi a
{
width: 50px;
background-color: black;
border: 1px solid red;
}

#navi a:link
{
color: red;
}

#navi a:visited
{
color: red;
background-color: white;
}

#navi a:hover
{
color: black;
background-color: red;
}

#unten
{
margin-top: 20px;
margin-left: 110px;
width:300px;
height:500px;
}

#unavi
{
width: 300px;
height: 300px;
margin-top: 20px;
font-size: 0,9em;
}

#unavi ul
{
margin-top: 50px;
margin-left: 30px;
padding: 0;
list-style-type: none;
}

#unavi a
{
width: 230px;
background-color: red;
font-weight: bold;
color: black;
}

#unavi a:visited
{
color: red;
background-color: white;
}

#unavi a:hover
{
color: red;
background-color: black;
}

#links li
{
width: 170px;
margin-bottom:10px;
list-style-type: none;
}

#links a:link
{
color: black;
}

Duderinho · #8 (**permalink**) 15.02.2010, 21:30

Ich hab dir mal eben ein Grundgerüst gebastelt, es ist außer den Containern noch nichts formatiert, schau es dir mal an und spiel damit. Bei Fragen helf ich dir gern weiter, soweit ich kann. Ich beschäftige mich auch noch nicht solange mit CSS

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="layout.css">
        <title>Untitled Document</title>
    </head>
    <body>
        <div class="all">
            <div class="menu">
                <div class="oben">
                    <ul>
                        <li>
                            eintrag1
                        </li>
                        <li>
                            eintrag2
                        </li>
                    </ul>
                </div>
                <br/>
                <div class="unten">
                    <a href="#" alt="Link">Linkname</a>
                </div>
                <br/>
                <div class="banner">
                    <img src="../img/bild1.gif" alt="Bild"/>
                </div>
            </div>
            <div class="header">
                <h1>&Uuml;berschrift</h1>
            </div>
			<br/>
			<div class="clear">&nbsp;</div>
            <div class="content">
                Text
            </div>
        </div>
    </body>
</html>

CSS:

Code:

.all {
    position: absolute;
    border: 1px solid #ff0000;
    height: 600px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -300px;
}

.menu {
    border: 1px solid #ff0000;
    position: absolute;
    float: left;
    width: 150px;
    height: 100%;
}

.oben {
    border: 1px solid #ff0000;
}

.unten {
    border: 1px solid #ff0000;
}

.banner {
    border: 1px solid #ff0000;
}

.header {
    border: 1px solid #ff0000;
    position: relative;
    float: right;
    width: 640px;
	height:70px;
}

.content {
    border: 1px solid #ff0000;
    position: relative;
    float: right;
    width: 640px;
    height: 500px;
}

.clear{
	clear:both;
}

Kralinho · #9 (**permalink**) 24.02.2010, 13:37

Hallo.

sorry dass ich erst jetzt schreibe, aber ich habe das Forum hier auf meiner Arbeit als Lesezeichen und musste erst mal bei mir zu hause danach suchen. Ich schaue mir das jetzt erst einmal an und bastele rum. Feedback gibts danach.

Gruß

Kralinho

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
HILFE Menüleiste nicht mehr sichtbar bei Mozilla und Safari	LittleStep	Javascript & Ajax	1	01.12.2009 20:39
Kontaktformular Hilfe nötig :)	sunny55	CSS	2	05.08.2008 19:29
HILFE, ich brauche Hilfe von Profis!	frambuesa	CSS	13	13.06.2008 22:46
Html Template bearbeiten!	suncity	CSS	1	17.12.2006 14:06
navi Leiste mit hover, active etc bearbeiten... hilfe! :-)	18inch	CSS	1	21.12.2004 16:15