Autor |
Nachricht |
-
hp-online-helfer
|
01.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;} |
|
↑
|
|
|
-
sinan-osm
|
01.09.2007 um 16:41 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
hp-online-helfer
|
01.09.2007 um 16:48 (UTC) Titel: |
|
|
sinan-osm hat Folgendes geschrieben: hammer tut DAnke |
|
↑
|
|
|
-
sinan-osm
|
|
↑
|
|
|
-
hp-online-helfer
|
01.09.2007 um 16:53 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
sinan-osm
|
|
↑
|
|
|
-
hp-online-helfer
|
01.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 |
|
↑
|
|
|
-
sinan-osm
|
|
↑
|
|
|
-
hp-online-helfer
|
01.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
|
|
↑
|
|
|
-
hp-online-helfer
|
02.09.2007 um 13:04 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
test-und-vorschau
|
02.09.2007 um 13:27 (UTC) Titel: |
|
|
***hochschieben*** |
|
↑
|
|
|
-
sinan-osm
|
03.09.2007 um 15:36 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
emi-home
|
03.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 |
|
↑
|
|
|
-
ravenhp
Wohnort: Linsburg/Nienburg/Hannover/Deutschland
|
05.09.2007 um 17:59 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
ravenhp
Wohnort: Linsburg/Nienburg/Hannover/Deutschland
|
05.09.2007 um 17:59 (UTC) Titel: |
|
|
|
|
↑
|
|
|
|