<b>REGISTER</b>

GFX-Sector - Fragen & Probleme


 
GFX-Sector » GFX-Area » Fragen & Probleme » [Frage] Weblayout Coden » Hello Guest [Login|Register]
Last Post | First Unread Post Print Page | Recommend to a Friend | Add Thread to Favorites

GFX-Sector - Your GFX-Source No. 1

  • √ kostenlose Mitgliedschaft
  • √ über 800 kostenlose Photoshop Tutorials
  • √ über 100 GB Photoshop-Ressourcen (Brushes, Render, PSDs, ...)
  • √ große und aktive Battle-Section
  • √ konstruktives Feedback zu GFX-Werken
  • √ einzigartiges Design
  • √ eines der größten Grafikplattformen in Deutschland
  • »»»JETZT KOSTENLOS REGISTRIEREN!«««

User Login

Fragen & Probleme
Hier können Fragen rund um das Thema GFX und Photoshop gestellt werden. Probleme und Anfängerfragen sind hier auch willkommen.
Post New Thread Post Reply

Weblayout Coden

     Deutsche Version  English version
Author
Post « Previous Thread | Next Thread »

firefighter
Fingerwischer


Avatar von firefighter

Registration Date: 20.01.2009
Posts: 34
Program: Photoshop CS4 Extendend

Spacer
Weblayout Coden

Weblayout Coden

       
Hi leute,
habe mir einn Weblayout in PS gebastelt und alles gesliced ... nur is ja in Tabellenform :-! ... habe mich jetzt daran versuct das ganze in CSS und HTML zu programmieren ... will aber irgendwie einfach nicht klappen ... arbeite schon locker 2 Stunden dran -.-'
hoffe ihr könnt mir helfen

Wie es einmal aussehen soll


Wie es (Leider) momentan aussieht


so ... hier der Verwendete CSS code Wink
code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:

body{
	
	background-color:gray;
	}
	
#header{
	background-image:url('Bilder/header.jpg');
	background-position:center;
	margin: 5px 3px 0px 3px;
	background-repeat:no-repeat;
	height: 59px;
	}
#banner {
	background-image:url('Bilder/banner.jpg');
	background-position:center;
	background-repeat:no-repeat;
	height: 126px;
	margin: 0px 3px 0px 3px;
	}
#navi{
	
	background-image: url('Bilder/nav.jpg');
	width: 976px;
	background-repeat:repeat-x;
	float: ceter;
	margin: 0px 3px 0px 3px;
	height: 31px;
	list-style-position:outside;
    list-style-type:none; 
	}
#navi li {
	width:65px;
    height:31px;
    background-image:url('Bilder/nav_norm.jpg');
    background-repeat:no-repeat;
    float:left;
    padding-top:5px;
    }


und dazu noch der passende html code Wink
code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

<!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>
<title>Home</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
	text-align: center;
}
</style>
</head>

<body>
<p id="header"></p>
<p id="banner"></p>
<ul id="navi">
<li><a href="#">Home</a></li>
<li><a href="#">Sponsoren</a></li>
<li><a href="#">Sonstiges</a></li>
<li><a href="#">Bla </a></li>

</ul>


</body>

</html>



hoffe ihr könnt mir helfen ... bin gerade echt am verzweifeln Wink
... wenn möglich sollte alles in der Mitte Stehen (untereinader) und die Links
sollten rechts anfangen und nach rechts weiter gehen (aber auch abschließend mit der kante vom Banner und vom Header anfangen Wink ...)

thx

MFG firefighter








Erste sig Zunge raus

Weblayout Coden 06.07.2009 10:11 firefighter is offline Search for Posts by firefighter

Mero Mero is a male
The Dreadworks Project

Spender


Avatar von Mero

Registration Date: 12.11.2006
Posts: 3,294
Location: Weserbergland
Program: Photoshop, Illustrator, Notepad++
Deviantart: dreadworks

Spacer
      

quote:
float: ceter;


Abgesehen davon, dass du dich verschrieben hast, existiert diese Zusweisung nicht.
Warum hast du so merkwürdige margin's?
Wenn du etwas zentrieren möchtest muss für den IE das Elternelement die Zuweisung text-align: center; bekommen und für die anderen Browser reicht es, wenn du dem zu zentrierenden Element margin: 0 auto; zuweist.


.
The Dreadworks Project

And in my darkest moment, fetal and weeping
The moon tells me a secret - my confidant
As full and bright as I am
This light is not my own and
A million light reflections pass over me
Weblayout Coden 06.07.2009 11:39 Mero is offline Homepage of Mero Search for Posts by Mero

firefighter
Fingerwischer


Avatar von firefighter

Registration Date: 20.01.2009
Posts: 34
Program: Photoshop CS4 Extendend

Thread Starter Thread Started by firefighter
Spacer
      

ich möchte aber den kompletten Nav Berecih Zentrieren ... mit text-algin bekomme ich doch nur Elemente und den Text Zentriert, aber nicht den Hintergrund, ode r??









Erste sig Zunge raus

Weblayout Coden 06.07.2009 12:29 firefighter is offline Search for Posts by firefighter

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

Zuerst mal ein ziemlich unsauberer Code.

Du möchtest das Layout zentriert haben, also schliesse den gesamten code doch in eine div ein:

<div id="wrap">
hier dein gesamter code
</div>

css:

#wrap{
margin: 0 auto;
text-align: center;
}

Nun verrate mir doch bite die Maße der Bild-dateien, dann kann ich dir weiterhelfen, den Code sauber zu bekommen.

lg
Weblayout Coden 06.07.2009 12:39 quantum is offline Homepage of quantum Search for Posts by quantum

firefighter
Fingerwischer


Avatar von firefighter

Registration Date: 20.01.2009
Posts: 34
Program: Photoshop CS4 Extendend

Thread Starter Thread Started by firefighter
Spacer
      

danke Wink ... klar verrate ich dir die px zahlen Wink ...

die Breite is jeweils 976px (vom Banner, vom Header und vom Nav Bereich)

die höhe vom Banner ist: 126px
vom header: 59px
und vom Nav Bereich: 31px

die Breite von den Links beträgt: 71px (die höhe is ja die vom Nav Bereich, also 31px)

danke schonmal Wink









Erste sig Zunge raus

Weblayout Coden 06.07.2009 17:46 firefighter is offline Search for Posts by firefighter

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

Hier der bisherige Code:

schau in dir in ruhe an fröhlich

Bis jetzt Valide fröhlich

Code:

php: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:

<!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" lang="de"><!-- damit Screenreader alles auf Deutsch lesen! -->

<head>
<title>Jugendfeuerwehr Werden - Startseite</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
    background-color:gray;
    }
#wrap{
    width: 976px;
    margin: 0 auto;
}
#header{
    background-image:url(Bilder/header.jpg) no-repeat;
    height: 59px;
        width: 976px;
    }
ul #navi{
    background-image: url(Bilder/nav.jpg) repeat-x;
    width: 976px;
    height: 31px;
        list-style-type:none; 
    }
#navi li {
    width:65px;
    height:31px;
    background-image:url(Bilder/nav_norm.jpg) no-repeat;
    float:left;
    padding-top:5px;
    }
</style>
</head>
<body>
<div id="wrap">
    <div id="header"></div>
    <ul id="navi">
        <li lang="en"><a href="#" title="bla">Home</a></li><!-- Damit Screenreader das ganze englisch ausprechen! -->
        <li><a href="#" title="bla">Sponsoren</a></li><!-- in den title tag kommt der titel bzw der name des Ziels rein! -->
        <li><a href="#" title="bla">Sonstiges</a></li>
        <li><a href="#" title="bla">Bla</a></li>
    </ul><!-- navi ende -->
</div><!-- wrap ende -->
</body>
</html>


bei weiteren Fragen oder Problemen einfach hier melden fröhlich

lg

/e Achja noch ein Tipp!

Verwende einen Editor mit syntax highlightning wie Notepad ++ oder ähnliches...

checke abundzu deinen Code: http://validator.w3.org

Und nichts sollte schief gehen xP


This post has been edited 2 time(s), it was last edited by quantum: 06.07.2009 19:08.
Weblayout Coden 06.07.2009 19:06 quantum is offline Homepage of quantum Search for Posts by quantum

firefighter
Fingerwischer


Avatar von firefighter

Registration Date: 20.01.2009
Posts: 34
Program: Photoshop CS4 Extendend

Thread Starter Thread Started by firefighter
Spacer

geht immernochnicht

       

Hi...
danke für die Hilfe ..
so weit bin ich schon Wink
nur ich habe das Problem, das die Blau makierte Stelle rechts an den punkt soll, wo die linke blau makierte stelle ist xP
also mit dem Hintergrund abschließend Zunge raus



thx schonmal ...
hier mein code ;fröhlich

php: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:

<!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" lang="de"><!-- damit Screenreader alles auf Deutsch lesen! -->

<head>
<title>Jugendfeuerwehr Werden - Startseite</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
    background-color:#5b5352;
    }
#wrap{
    width: 976px;
    margin: 0 auto;
}
#header{
    background-image:url(Bilder/header.jpg) no-repeat;
    height: 59px;
    width: 976px;
    margin-left: 0px;
    }
#banner{
    background-image:url('Bilder/banner.jpg')no-repeat;
    background-repeat:no-repeat;
    height:126px;
    width: 976px;
    margin-left: 0px;
}
#navi{
    background-image: url(Bilder/nav.jpg) no-repeat;
    width: 976px;
    height: 31px;
    list-style-type:none;     
    background-repeat:no-repeat;
    margin-left: 0px;


    }
#navi li {
    font-variant:small-caps;
    width:69px;
    height:31px;
    background-image:url(Bilder/nav_norm.jpg) ;
    float:left;
    padding-top:5px;
    background-repeat:no-repeat;
    color:white;
    margin-left: 0px;
    }
#navi li:hover{
    background-image:url('Bilder/nav_hover.jpg');    
}
#navi a
    {
    color:white;
    }
#content{
    background-color:#c3b2b2;
    height:auto;
}
#title{
    background-image:url('Bilder/news_header.jpg');
    width:976px;
    height: 36px;
}
#copyright{
    background-image:url('Bilder/copyright.jpg');
    height: 41px;
    width: 976px;
}

</style>
</head>
<body>
<div id="wrap">
    <div id="header"></div>
    <div id="banner"></div>
    <ul id="navi">
        <li lang="en"><a href="#" title="bla">Home</a></li><!-- Damit Screenreader das ganze englisch ausprechen! -->
        <li><a href="#" title="bla">Sponsoren</a></li><!-- in den title tag kommt der titel bzw der name des Ziels rein! -->
        <li><a href="#" title="bla">Sonstiges</a></li>
        <li><a href="#" title="bla">Bla</a></li>
    </ul><!-- navi ende -->
    <div id="title"></div>
    <div id="content">aasdasd<br />
        asdasdasd<br />
        asdasdasdas<br />
        dasdasd<br />
        asda<br />
        sd<br />
        asd<br />
        asd<br />
        asd<br />
        asd<br />
        as<br />
        das<br />
        das<br />
        das<br />
        das<br />
        d</div>
        <div id="copyright"></div>
</div><!-- wrap ende -->
</body>
</html>









Erste sig Zunge raus

Weblayout Coden 07.07.2009 21:03 firefighter is offline Search for Posts by firefighter

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

Als erstes, im Content.
Text darf nicht ohne Textelemente wie p oder h1-6 stehen.

2tens: wieso is die div id="banner" wieder drin? zweck?

Aber dein eig. prob kann ich mir gerade nciht erklären.

habe die nacht nicht geschlafen.
die ganze zeit nur html geschrieben.
das verwirrt einen o0

ich schaue morgen nochmal xP
Weblayout Coden 08.07.2009 01:21 quantum is offline Homepage of quantum Search for Posts by quantum

firefighter
Fingerwischer


Avatar von firefighter

Registration Date: 20.01.2009
Posts: 34
Program: Photoshop CS4 Extendend

Thread Starter Thread Started by firefighter
Spacer
      

Wink ...
Header is das ganz Oben (Wllkommen bei JF-Werden.de.vu JF since 1994)
und das banner ist der Bereich, wo jf-werden.de.vu drin steht und das shöne Fahrzeug drinne ist (ein LF 16-TS ZS Zunge raus )

warum programmierst denn so viel HTML ? Zunge raus

lg









Erste sig Zunge raus

Weblayout Coden 08.07.2009 08:58 firefighter is offline Search for Posts by firefighter
 
Spacer
   
GFX-Sector
unregistered


hat kein Avatar


Spacer

Have you enjoyed this topic?

If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)
New Post 08.07.2009 08:58  
Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » GFX-Area » Fragen & Probleme » [Frage] Weblayout Coden

Similar topics to Weblayout Coden
Thread
[S] Jemand der Slicen + Coden kann... (Forum: HTML, CSS)
[Dienstleistung] Coden von Wbb Lite style (Forum: Archiv)
[wip] weblayout (Forum: Designs)
[Leicht] Enterpage + Slice + Coden (Forum: Webdesign/Interface)
Slicen und Coden Problem (Forum: HTML, CSS)

 
Heutige TOP 10 Suchbegriffe:
Gfx Gfx Sector Ku Klux Klan Marlboro Schwarzer Humor Photoshop Tutorials Gfx Profilbild Gimp Brushes Einfügen Schriftzug Erstellen Kkk Marlboro Cro
Weblayout Coden : Fragen & Probleme (Permalink)
  Sectorbereich   Forenbereich   Battlesection