<b>REGISTER</b>

GFX-Sector - HTML, CSS


 
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Problem beim Design coden » 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
Post New Thread Post Reply

Problem beim Design coden

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

just-magic just-magic is a male
Zauberstabbenutzer


Avatar von just-magic

Registration Date: 18.08.2008
Posts: 20
Program: Photoshop CS5

Spacer
Problem beim Design coden

Problem beim Design coden

      

hallo
ich habe mich mal drangesetzt um diese Design aus dem Tut zu coden (ist mein erstes großes Grinsen )

Hab soweit schon einige Tutorials zum Thema coden geschaut und hab halt einfach mal angefangen^^ habe jetzt aber folgendes Problem...wie ihr sehen könnt ist die Navigation rechts neben dem Header und ich habe keine Ahnung wie ich diese da hinbekommen soll -.- immer wenn ich margin:0px 0px 0px 504px; verwende, wird die Navigation von links aus an die richtige stelle gesetzt aber nicht von oben, sprich sie hängt sich direkt an die unterseite des Headers -.- so-->

Wie bekomme ich es hin das die Navigation rechts neben bem Header sitzt wie im Tutorial??


Problem beim Design coden 02.03.2010 17:12 just-magic is offline Search for Posts by just-magic

piJoe
Designartist


Avatar von piJoe

Registration Date: 11.09.2009
Posts: 1,253
Deviantart: pijoe93

Spacer
      

im navi-div n float:left im style tag rein.
Danach im folgenden Tag, was auch immer das is, n div, n br ode rsonstwas nen style="clear:both;" rein.
Dann müsste es klappen ^^

Ansonsten mal nach "div layout tutorial" googlen oder so Wink




^g4MBLe basht fröhlich

Problem beim Design coden 02.03.2010 18:29 piJoe is offline Search for Posts by piJoe

just-magic just-magic is a male
Zauberstabbenutzer


Avatar von just-magic

Registration Date: 18.08.2008
Posts: 20
Program: Photoshop CS5

Thread Starter Thread Started by just-magic
Spacer
      

kannste des noch en bissel genauer erklären?
Versteh des hier nicht so ganz verwirrt

quote:
Danach im folgenden Tag, was auch immer das is, n div, n br ode rsonstwas nen style="clear:both;" rein.



Problem beim Design coden 03.03.2010 00:09 just-magic is offline Search for Posts by just-magic

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<style type="text/css">
#navi {
    floatleft;
}
</style>
...
<div id="nav">

</div>

<br clear="both">
<!--regel das dann halt per cssclearboth; -->



Problem beim Design coden 03.03.2010 00:14 quantum is offline Homepage of quantum Search for Posts by quantum

just-magic just-magic is a male
Zauberstabbenutzer


Avatar von just-magic

Registration Date: 18.08.2008
Posts: 20
Program: Photoshop CS5

Thread Starter Thread Started by just-magic
Spacer
      

hmm klappt leider auch nicht unglücklich

hab hier mal mein code geposted

html

php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<div id "page-wrapper">
    <div id="page-header">
        <img border="0" src="Bilder/header.png" alt="Magic Design | Portfolio"/>
        </div>
<div id="main-navi">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">about me</a></li>
        <li><a href="#">contacts</a></li>
    </ul>
  </div>


und css
php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
#main-navi {
    float:left;
    clear:both;
}

#main-navi ul {
    clear:both;
    margin:0px 0px 0px 504px;
}

#main-navi li {
    list-style:none;
    margin:15px 0px;
}

#main-navi a:active, a:visited {
    outline:none;
}



Problem beim Design coden 03.03.2010 12:47 just-magic is offline Search for Posts by just-magic

ClOuDy. ClOuDy. is a male
Pfadfinder


Avatar von ClOuDy.

Registration Date: 31.01.2010
Posts: 569
Program: PS CS5

Spacer
      

#main-navi {
float:left;
clear:both;
}

vergleich: du trittst beim autofahren auf gas und sofort auf die bremse.

das clear da weg, ebenso aus dem main-navi.

du machst denkfehler ^^

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
<div id "page-wrapper">
        <img style="float:left" src="bilder/header.png" alt="Magic Design | Portfolio"/>
    <ul id="main-navi">
        <li><a href="#">home</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">about me</a></li>
        <li><a href="#">contacts</a></li>
    </ul>
    <br style="clear:both" />
</div>
#main-navi {
margin-left: 504px;
float: left;
}


da du ja keine symbole an listen elementen haben willst, schalt es global aus:

code:
1:
2:
3:
4:
5:
li {
 list-style-type: none;
}


außerdem gewöhn dir an, wenn du weiter verweisen willst z.b.

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>



undsoweiter, dann macht man das im css so:

code:
1:
2:
3:
4:
5:
#beispiel ul li
#beispiel ul li ul
#beispiel ul li ul li


code sparen smile

bei einfach verscahtelungen gehts noch vll, aber bei größeren beiste dir die zähne aus smile



Problem beim Design coden 04.03.2010 00:54 ClOuDy. is offline Search for Posts by ClOuDy.
 
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 04.03.2010 00:54  
Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Problem beim Design coden

Similar topics to Problem beim Design coden
Thread
Gamenation Webdesign (Forum: Designs)
Websoccer Design erstellen (Forum: Archiv für Anfragen)
Guild Wars Forendesign | Para-Project (Forum: Designs)
Webdesign (Forum: Designs)
Php problem (Forum: PHP, MySQL)