<b>REGISTER</b>

GFX-Sector - HTML, CSS


 
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » [Hilfe]HTML+CSS Problem » Hello Guest [Login|Register]
Last Post | First Unread Post Print Page | Recommend to a Friend | Add Thread to Favorites

HTML, CSS
Einfache Scriptsprachen und deren Layout mit HTML und CSS
Pages (2): [1] 2 next » Post New Thread Post Reply

[Hilfe]HTML+CSS Problem

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

3N3R6 3N3R6 is a male
Fingerwischer


Avatar von 3N3R6

Registration Date: 03.02.2008
Posts: 44
Location: Essen
Program: Photoshop CS3
Deviantart: 3N3R6

Spacer
[Hilfe]HTML+CSS Problem

[Hilfe]HTML+CSS Problem

       
Hallo,

ich hab grad ein Problem und zwar schaff ich es nicht, eine navi mit HTML und CSS zu Bauen. Ich hab das zuvor in Dreamweaver mit Tabellen gemacht und dann gemerkt, das Tabellen ja nich die feine Art dafür sind. Ich bekomm auch nicht die Links weg, sodass nur die Buttons angezeigt werden. Vllt kann mir ja jemand helfen.

PS: Es ist das erste ma,l das ich was per hand Code und das zweite mal, das ich sowas überhaupt mache.

Das ist mein Problem:


und das sind die index.html und die design.css


index.hmtl
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:

<!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>TestTest</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>

<body>
<div id="header" align="center">
	<img src="Bilder/header.jpg" alt="Header" />
	</div>
	<div id="navi_top" align="center">
	  <ul>
          <li><a href="#"><img src="Bilder/b1_home.gif" alt="Home" width="62" height="25">Home</a></li>
          <li><a href="#"><img src="Bilder/b2_news.gif" alt="News" width="60" height="25" border="0" />News</a></li>
          <li><a href="#"><img src="Bilder/b3_reff.gif" alt="Refferenzen" width="97" height="25" border="0" />Refferenzen</a></li>
          <li><a href="#"><img src="Bilder/b4_dl.gif" alt="Downloads" width="97" height="25" border="0" />Downloads</a></li>
          <li><a href="#"><img src="Bilder/b5_kontakt.gif" alt="Kontakt" width="78" height="25" border="0" />Kontakt</a></li>
          <li><img src="Bilder/b_end.gif" alt="Home" width="306" height="25" /></li>
        </ul>
      </div>
</body>
</html>


und die design.css
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:

body{
	background-color:#212121;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

#header{
	width:700;
	height:778;
	border:0px;
}	

#navi_top{
	margin-top:0px;
	width:700; 
	height:25;
}
	
#navi_top li{
	list-style-type:none;
	float:left;
}

#navi_top li a{
	text-decoration:none;
	text-align:center;
	display:block;
	width:62px;
	height:25px;
}


Danke schon mal im Vorraus...

LG E-Tox
[Hilfe]HTML+CSS Problem 06.01.2009 16:49 3N3R6 is offline Homepage of 3N3R6 Search for Posts by 3N3R6

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

also vllt mal was grundsätzliches:

wenn du ein design wie deins umsetzen willst macht man das i.d.r. so:

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<div id="container">

	<div id="header"></div>
	<ul id="nav">
		<li>site 1</li>
		<li>site 2</li>
		<li>site 3</li>
	</ul>
	<div id="content"></div>
	<div id="footer"></div>

</div>


css maessig ist das wichtigste:

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

#container {
	position: relative;
	margin: 0 auto;
	width: 800px;
}

#header {
	background: url('background-image.png') no-repeat center center;
}

#nav li {
	float: left;
	padding: 5px;
	margin: 5px;
}


is überflüssig nochmal extra n div um die nav-ul zu bauen - ebenso ist es üblich das header bild als hintergrund einzufügen...
[Hilfe]HTML+CSS Problem 06.01.2009 17:25 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

3N3R6 3N3R6 is a male
Fingerwischer


Avatar von 3N3R6

Registration Date: 03.02.2008
Posts: 44
Location: Essen
Program: Photoshop CS3
Deviantart: 3N3R6

Thread Starter Thread Started by 3N3R6
Spacer
      

Jetzt hab ich das so gemacht und ich seh kein Header mehr verwirrt

[Hilfe]HTML+CSS Problem 06.01.2009 18:14 3N3R6 is offline Homepage of 3N3R6 Search for Posts by 3N3R6

cheahzle cheahzle is a male
Love it!


cheahzle hat kein Avatar

Registration Date: 23.12.2007
Posts: 290
Location: Düsseldorf

Spacer
      

dann versuch ein wenig mit den werten rumzuspielen smile

[Hilfe]HTML+CSS Problem 06.01.2009 18:38 cheahzle is offline Search for Posts by cheahzle

3N3R6 3N3R6 is a male
Fingerwischer


Avatar von 3N3R6

Registration Date: 03.02.2008
Posts: 44
Location: Essen
Program: Photoshop CS3
Deviantart: 3N3R6

Thread Starter Thread Started by 3N3R6
Spacer
      

Ich glaube, das versuche ich schon seit ein paar stunden cool

[Hilfe]HTML+CSS Problem 06.01.2009 18:43 3N3R6 is offline Homepage of 3N3R6 Search for Posts by 3N3R6

cheahzle cheahzle is a male
Love it!


cheahzle hat kein Avatar

Registration Date: 23.12.2007
Posts: 290
Location: Düsseldorf

Spacer
      

code: 
1:
2:
3:
4:
5:

#header {
	background: url('background-image.png') no-repeat center center;
}


versuch einfach mal nur ein center

code: 
1:
2:
3:
4:
5:

#header {
	background: url('background-image.png') no-repeat center;
}


o.O wenn nicht Browser wechseln.
[Hilfe]HTML+CSS Problem 06.01.2009 19:53 cheahzle is offline Search for Posts by cheahzle

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

ja er muss schon beim header width und heigth angeben - wenn die angegebenen werte der x- bzw y-werten des hintergrundbildes entsprechen passts ja auch; du kannst alternativ auch die positionsangaben vernachlässigen und einfach nicht hinschreiben.
[Hilfe]HTML+CSS Problem 06.01.2009 19:56 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

cheahzle cheahzle is a male
Love it!


cheahzle hat kein Avatar

Registration Date: 23.12.2007
Posts: 290
Location: Düsseldorf

Spacer
      

Ich hatte es auch mal mit dem Header dann wurde es damals glaub ich von i-explorer verschluckt und der Header war weg. Aber izak hat voll und ganz recht.
[Hilfe]HTML+CSS Problem 07.01.2009 09:40 cheahzle is offline Search for Posts by cheahzle

bMedia bMedia is a female
Weichzeichner


bMedia hat kein Avatar

Registration Date: 06.01.2009
Posts: 58

Spacer
      

zudem solltest du den images ein border="0" hinzufügen, sodass da kein rahmen drum entstehzt aufgrund der verlinkung und der test hinter dem bild ist überflüssig

code: 
1:

 <li><a href="#"><img src="Bilder/b1_home.gif" alt="Home" width="62" height="25" border="0" /></a></li>


so könnte das dann aussehen .. das / ist da damit der tag gleich wieder geschlossen wird und der code valid bleibt
[Hilfe]HTML+CSS Problem 07.01.2009 14:00 bMedia is offline Search for Posts by bMedia

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

sry, aber das ist doch totaler blödsinn und overhead hoch 10 wenn du so weitermachst...

warum JEDEM img tag n border attribut geben wenn mans ganz einfach per css machen kann - und eigtl auch so macht?!?

code: 
1:
2:
3:
4:
5:

img {
	border: none;
}


[Hilfe]HTML+CSS Problem 07.01.2009 14:07 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

cheahzle cheahzle is a male
Love it!


cheahzle hat kein Avatar

Registration Date: 23.12.2007
Posts: 290
Location: Düsseldorf

Spacer
      

izak demnächst fügst du einen bedanko für deinen kommentar ein lol.

das border="0" ist sowas von unnötig.

Naja mich würd ejetzt mal interessieren ob der Threadersteller das ganze nun gepackt hat und woran es lag bzw. ab wann es geklappt hat mit dem Header.
[Hilfe]HTML+CSS Problem 07.01.2009 17:25 cheahzle is offline Search for Posts by cheahzle

bMedia bMedia is a female
Weichzeichner


bMedia hat kein Avatar

Registration Date: 06.01.2009
Posts: 58

Spacer
      

ja gut kann man auch css machen ... und ist auch einfacher..hat ich aber nit dran gedacht^^
[Hilfe]HTML+CSS Problem 07.01.2009 18:15 bMedia is offline Search for Posts by bMedia

3N3R6 3N3R6 is a male
Fingerwischer


Avatar von 3N3R6

Registration Date: 03.02.2008
Posts: 44
Location: Essen
Program: Photoshop CS3
Deviantart: 3N3R6

Thread Starter Thread Started by 3N3R6
Spacer
      

Also mit dem Header hat es jetzt geklappt. Ich hatte die Höhe und Breite voll vergessen, aber die Navi ist immer noch nicht das Wahre. Die Links bekomm ich iwie auch nicht weg, sodass er mir nur die Buttons anzeigt.

Wie gesagt bin noch Anfaengergroßes Grinsen

Edit: Ein bisschen probieren und die Links werden nicht mehr angezeigt. Aber nun kann man nicht mehr auf die Buttons klicken verwirrt

Wenn einer noch nen Tipp hat, immer her damit großes Grinsen

This post has been edited 1 time(s), it was last edited by 3N3R6: 07.01.2009 23:14.
[Hilfe]HTML+CSS Problem 07.01.2009 21:35 3N3R6 is offline Homepage of 3N3R6 Search for Posts by 3N3R6

cheahzle cheahzle is a male
Love it!


cheahzle hat kein Avatar

Registration Date: 23.12.2007
Posts: 290
Location: Düsseldorf

Spacer
      

zeig mal bitte deinen quelltext. Dann können wir dir besser helfen smile

[Hilfe]HTML+CSS Problem 08.01.2009 06:20 cheahzle is offline Search for Posts by cheahzle

3N3R6 3N3R6 is a male
Fingerwischer


Avatar von 3N3R6

Registration Date: 03.02.2008
Posts: 44
Location: Essen
Program: Photoshop CS3
Deviantart: 3N3R6

Thread Starter Thread Started by 3N3R6
Spacer
      

Ok, hier sind sie...

index.html

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<body>
<div id="container">
	<div id="header"></div>
		<ul id="navi">
          <li id="navi_home"><a href="#">Home</a></li>
          <li id="navi_news"><a href="#">News</a></li>
          <li id="navi_refferenzen"><a href="#">Refferenzen</a></li>
          <li id="navi_dl"><a href="#">Downloads</a></li>
          <li id="navi_kontakt"><a href="#">Kontakt</a></li>
          <li id="navi_ende"></li>
       </ul>
	</div>
</body>
</html>


design.css
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:
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:

body{
	background-color:#212121;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

#container {
	position:relative;
	margin:0 auto;
	width:700px;
}

#header{
	background:url(Bilder/header.jpg) no-repeat center center;
	width:700px;
	height:152px;
}	
	
#navi{
	text-decoration:none;
}

#navi li a{
	text-decoration:none;
	list-style-type:none;
	visibility:hidden;
}
	
#navi_home{
	display:block;
	float:left;
	background-image:url(Bilder/b1_home.gif);
	background-repeat:no-repeat;
	width:62px;
	height:25px;
}

#navi_news{
	display:block;
	float:left;
	background-image:url(Bilder/b2_news.gif);
	background-repeat:no-repeat;
	width:60px;
	height:25px;
}

#navi_refferenzen{
	display:block;
	float:left;
	background-image:url(Bilder/b3_reff.gif);
	background-repeat:no-repeat;
	width:97px;
	height:25px;
}

#navi_dl{
	display:block;
	float:left;
	background-image:url(Bilder/b4_dl.gif);
	background-repeat:no-repeat;
	width:97px;
	height:25px;
}

#navi_kontakt{
	display:block;
	float:left;
	background-image:url(Bilder/b2_news.gif);
	background-repeat:no-repeat;
	width:78px;
	height:25px;
}
	
#navi_ende{
	display:block;
	float:left;
	background-image:url(Bilder/b_end.gif);
	background-repeat:no-repeat;
	width:306px;
	height:25px;
}

[Hilfe]HTML+CSS Problem 08.01.2009 17:28 3N3R6 is offline Homepage of 3N3R6 Search for Posts by 3N3R6
 
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 15.01.2009 00:56  
Pages (2): [1] 2 next » Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » [Hilfe]HTML+CSS Problem

Similar topics to [Hilfe]HTML+CSS Problem
Thread
CSS Frage (Forum: HTML, CSS)
Probleme mit Div Länge (Forum: HTML, CSS)
[Problem] MyBB Button (Forum: Fragen & Probleme)
MYSQL Tabelle - Problem (Forum: PHP, MySQL)
Lass Surfen ! CSS (Forum: Werbung)

 
Heutige TOP 10 Suchbegriffe:
Gfx Wallpaper Schwarzer Mann Cro Hd Wallpaper Photoshop Tutorials Gfx Tutorials Photoshop One Piece Wallpaper Effect Stocks Pack Gfx Audi Rs8 Cro
[Hilfe]HTML+CSS Problem : HTML, CSS (Permalink)
  Sectorbereich   Forenbereich   Battlesection