Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag01.09.2007 um 16:36 (UTC)    
Titel: [tutorial] das design CSS

Hallo,

hier erkläre ich wie mann das DESIGN CSS benutzt

und dafür gebe ich kein support!!!

und wir benutzen in diesen tutorial eine externe navi



als erstens


müssen ein paar unnötige Klassen entfernt werden:
und das hier kommt in das feld ,,CSS-Code
ohne Style Tags"


Zitat:
Zitat:
div#nav_container{visibility: hidden;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}
div.header, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pre_header, #post_header, #header_container, #pre_content, #nav_heading{
display: none;}




Zweitens

müssen wir ein design-bild machen
der header müsst ihr schon ihm design bild rein machen!
z.b das hier





drittens

jetzt kommt der code wo der body rein kommt (body gleich design-bild)


Zitat:
#Mein_Design {
position: absolute;
left: 50%;
margin-left:-400px;
width: 831px;
height: 516px;
background-image:url(Hier Dein design-Bild-URL);
background-repeat: no-repeat;}



viertens

hier müsst ihr anfangen zu postinieren,
ihr müsst die navi auf das design-bild sozusagen passend drauf leggen

mit top und left postiniert man

top-gleich runter hoch jenachdem

left links oder rechts jenachdem^^

Das Feld für die eigene Navigation:

Zitat:
#Navi{
position: absolute;
left: 50%;
top: 10px;

margin-left: -360px;
width:680px;
height:30px;
border: 0px solid #FFFFFF;}



fünftens:
ihr müsst den content auf das design bild sozusagen drauf legen



Das Textfeld (baukasten-klasse #content)
Das overflow:auto; mach das Feld scrollbar:


#content{
position: absolute;
left: 50%;
top: 71px;
margin-left:-330px;
width: 660px;
height: 350px;
color: #FFFFFF;
border: 0px solid #FFFFFF;
overflow:auto;}





---------------------------------------------------------
sechtsens


Und in das Feld "Text über Design" kommen diese beiden
Klassen nochmal hinein :

<div id="Mein_Design"></div>
<div id="Navi"> Hier HTML-Code für eigene Navi </div>

------------------------------------------------------

Man kann natürlich beliebig weitere Klassen einfügen.
Einmal immer als #Klasse{ ..... ins Feld "CSS".
Dann gleiche Klasse als <div id="Klasse">Inhalt</div>
ins Feld "Text über Design".

Tip:
Mache bei den Klassen das border auf 1px , dann sieht man
wie man sie positioniere muss. Und welche Breite und
Höhe sie benötigen. Hängt ja von den Feldern auf dem Bild ab,
das als Design verwendet wird.



und hier ist ein externer navi-code

code:

Zitat:
<ul>
<li><a href="hier ziel adresse" target="_self" id="current">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
</ul>


und wenn ihr buttons als navi auch haben wollt dann müsst ihr nur

das hier noch

unter

der klasse navi #navi einfügen


Zitat:
#Navi_1 ul {
margin: 0;
padding: 0;
list-style-type: none;
text-indent: 20px;
letter-spacing: 1px;}

#Navi_1 li {
list-style-image: none;
margin:0;
border-bottom: 1px solid black;}

#Navi_1 a {
display: block;
width: 127px;
height: 22px;
font: bold 12px/22px Verdana, Arial,
Helvetica, sans-serif; }

#Navi_1 a:link, #Navi_1 a:visited {
background: url(hier button url rein);
color: #FFFFD5;text-decoration: none;
padding-bottom: 0;}

#Navi_1 li a:hover {
background: url(hier button-hover-url-rein)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;text-decoration: none;}

#Navi_1 li a#current {
background: url(hier button url rein)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;text-decoration: none;}


und wenn es unter der klasse navi eingefügt wurde sieht das dann so ihm code teil aus

Zitat:
#Navi_1 {
position: absolute;
left: 50%;
top: 120px;
margin-left: -453px;
width: 127px;
text-align: left;
border: 1px solid black;
border-bottom: none;
margin-bottom: 2em;}

#Navi_1 ul {
margin: 0;
padding: 0;
list-style-type: none;
text-indent: 20px;
letter-spacing: 1px;}

#Navi_1 li {
list-style-image: none;
margin:0;
border-bottom: 1px solid black;}

#Navi_1 a {
display: block;
width: 127px;
height: 22px;
font: bold 12px/22px Verdana, Arial,
Helvetica, sans-serif; }

#Navi_1 a:link, #Navi_1 a:visited {
background: url(http://img.webme.com/pic/h/hp-hilfe-tipps-online/test-design-button.jpg);
color: #FFFFD5;text-decoration: none;
padding-bottom: 0;}

#Navi_1 li a:hover {
background: url(http://img.webme.com/pic/h/hp-hilfe-tipps-online/test-design-button.jpg)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;text-decoration: none;}

#Navi_1 li a#current {
background: url(http://img.webme.com/pic/h/hp-hilfe-tipps-online/test-design-button.jpg)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;text-decoration: none;}
Beitrag01.09.2007 um 16:41 (UTC)    
Titel:

hammer tut DAnke
______________
[img:eb8ddbe9ff]http://sinan-osm.de.tl/sig.png[/img:eb8ddbe9ff]
www.sinan-osm.communityhost.de <---- mein Forum
www.sinan-61.tr.gg <---- meine türkische seite
Beitrag01.09.2007 um 16:48 (UTC)    
Titel:

sinan-osm hat Folgendes geschrieben:
hammer tut DAnke



mache ich gern^^

kleiner teil von wolle weil er mir damals geholfen hat css mehr zu verstehen und jetzt kann ich dafür sogar tuts^^

mfg
______________
[img:fb287485cb]http://img.webme.com/pic/h/hp-online-helfer/hp1.gif[/img:fb287485cb]

[img:fb287485cb]http://img.webme.com/pic/h/hpbk-suche/banner.jpg[/img:fb287485cb]
Beitrag01.09.2007 um 16:50 (UTC)    
Titel:

wie lange hat das gedauert? kann man hier auch Fragen stellen?also zu diesem Tut wenn man was nicht kapiert
______________
[img:eb8ddbe9ff]http://sinan-osm.de.tl/sig.png[/img:eb8ddbe9ff]
www.sinan-osm.communityhost.de <---- mein Forum
www.sinan-61.tr.gg <---- meine türkische seite
Beitrag01.09.2007 um 16:53 (UTC)    
Titel:

ja, aber nicht zu viele weil ich bin gerade was am testet, aber ich mache sowieso gerade bissel pause^^
______________
[img:fb287485cb]http://img.webme.com/pic/h/hp-online-helfer/hp1.gif[/img:fb287485cb]

[img:fb287485cb]http://img.webme.com/pic/h/hpbk-suche/banner.jpg[/img:fb287485cb]
Beitrag01.09.2007 um 17:21 (UTC)    
Titel:

dauert das das zu machen? vllt. weißt du das weil du das ja schon machst
______________
[img:eb8ddbe9ff]http://sinan-osm.de.tl/sig.png[/img:eb8ddbe9ff]
www.sinan-osm.communityhost.de <---- mein Forum
www.sinan-61.tr.gg <---- meine türkische seite
Beitrag01.09.2007 um 17:25 (UTC)    
Titel:

sinan-osm hat Folgendes geschrieben:
dauert das das zu machen? vllt. weißt du das weil du das ja schon machst



meinst du ein design mit den neuen auswahl design css


das dauert bei immer 3/4 stunde manchmal auch auch nur 1/2stunde

mfg
______________
[img:fb287485cb]http://img.webme.com/pic/h/hp-online-helfer/hp1.gif[/img:fb287485cb]

[img:fb287485cb]http://img.webme.com/pic/h/hpbk-suche/banner.jpg[/img:fb287485cb]
Beitrag01.09.2007 um 17:32 (UTC)    
Titel:

ja ich habe jetz sowas gemacht schau hier ich ahbe dien bild genommen www.testoo.de.tl das mit der Navi geht nicht
______________
[img:eb8ddbe9ff]http://sinan-osm.de.tl/sig.png[/img:eb8ddbe9ff]
www.sinan-osm.communityhost.de <---- mein Forum
www.sinan-61.tr.gg <---- meine türkische seite
Beitrag01.09.2007 um 18:03 (UTC)    
Titel:

mein body-bild hat die größe

breite:915px

höhe:538px

im design code

Zitat:
ist ja #Mein_Design {
position: absolute;
left: 50%;
margin-left:-400px;
width: 831px;
height: 516px;
background-image:url(Hier Dein design-Bild-URL);
background-repeat: no-repeat;}

das hier

bei widht musst du die breite einfügen
und bei height muss die höhe rein

dann ist schonmal das design bild gerade^^


und am besten gehst du zum anfang mal nurso zum testet auf extras dann machst du den counter mal weg, nur für den anfang!

dann siehst du oben wo deine werbum ist steht hier kommt deine navi-html-code rein

ich gib dir mal mein navi-html-code

code:

<ul>
<li><a href="hier ziel adresse" target="_self" id="current">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
<li><a href="hier ziel adresse" target="_self">hier menu-name</a></li>
</ul>






mfg

alle genau lesen dann wüsstest du das mit der navi^^

aber trozdem gut das du nachfragst^^
______________
[img:fb287485cb]http://img.webme.com/pic/h/hp-online-helfer/hp1.gif[/img:fb287485cb]

[img:fb287485cb]http://img.webme.com/pic/h/hpbk-suche/banner.jpg[/img:fb287485cb]


Zuletzt bearbeitet von hp-online-helfer am 01.09.2007, 19:06, insgesamt einmal bearbeitet
Beitrag02.09.2007 um 13:04 (UTC)    
Titel:

hi,

auf dieser seite ist ews perfekt zusehen wie es ausehen kann wen man CSS perfekt beherrscht!!

nix für angänger nur profis!!!

http://test-und-vorschau.de.tl/
______________
[img:fb287485cb]http://img.webme.com/pic/h/hp-online-helfer/hp1.gif[/img:fb287485cb]

[img:fb287485cb]http://img.webme.com/pic/h/hpbk-suche/banner.jpg[/img:fb287485cb]
Beitrag02.09.2007 um 13:27 (UTC)    
Titel:

***hochschieben***
Beitrag03.09.2007 um 15:36 (UTC)    
Titel:

coool du hast das design vom alten hpbk geklaut^^
______________
[img:eb8ddbe9ff]http://sinan-osm.de.tl/sig.png[/img:eb8ddbe9ff]
www.sinan-osm.communityhost.de <---- mein Forum
www.sinan-61.tr.gg <---- meine türkische seite
Beitrag03.09.2007 um 15:51 (UTC)    
Titel:

ja sieht sehr gut aus musst die Button noch ein bischen nach rechts verschieben aber sonst.... Hut ab Rolling Eyes
Beitrag05.09.2007 um 17:59 (UTC)    
Titel:

Könnt man auch mal als wichtig makieren oderim Ordner Prifi-Toturials schieben is ja ehh ejder scheis als wichtig
______________
[img:fcdf63ae9d]http://zandi008.za.funpic.de/RavenBannerV1.00.jpg[/img:fcdf63ae9d][img:fcdf63ae9d]http://ravenhp.de.tl/sig.png[/img:fcdf63ae9d]
Beitrag05.09.2007 um 17:59 (UTC)    
Titel:

Könnt man auch mal als wichtig makieren oderim Ordner Prifi-Toturials schieben is ja ehh jeder scheis als wichtig
______________
[img:fcdf63ae9d]http://zandi008.za.funpic.de/RavenBannerV1.00.jpg[/img:fcdf63ae9d][img:fcdf63ae9d]http://ravenhp.de.tl/sig.png[/img:fcdf63ae9d]
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de