ugrás a tartalomhoz

Navigációs dobozom alá szeretnék beszúrni még egyet (CSS)

ParadoxH · 2006. Már. 1. (Sze), 21.51
Re!
Pár napja kezdtem a CSS tanulmányozását..
fel is tettem egy site-ot a http://paradox.hard-core.hu -ra..
egy kis segítségre lenne szükségem:
hogyan érhetném el hogy a navigációs box alá még beszúrjak egy box ot (teahát attól teljesen különállót)?
már 1 órája próbálgatom de vmit nagyon nem jól csinálok :(
pls nézzétek el hogy még csak most kezdtem a css tanulámnyozását, és ha lehet 1 kicsit szájbarágósan segitsetek..
előre is köszönöm szépen
‹ Beviteli mezők összegének maximum-korlátozása (JS) hr tag képként ›
 ■
1

Például...

-zsolti- · 2006. Már. 1. (Sze), 22.06
...simán aláteszed a forrásban, a kettőt pedig körülfogod egy másik fix szélesség divvel, ami nem engedi, hogy egymás mellé csússzanak.
Egyébként a navigációban nem kell minden menüpontonak külön div. Szebb megoldás, ha hivatkozással csinálod (display: block) vagy még jobb, ha li-be, teszed a hivatkozást, és annak is tudsz bordert, hovert adni.

Ja bocs, szájbarágósan: ez esetben itt találsz segítséget, szerintem elég jól érthető és logikusan felépített reference.
2

<Nincs cím>

ParadoxH · 2006. Már. 2. (Cs), 14.17
Köszönöm a segítséget.. megpróbálom megoldani, ha esetleg felmerülne vmi akkor majd még kérek segítséget, ha nem gond..
"A tudás fontos, mert megtaníthat,
hogy azt is átlásd, ami elvakíthat." Depresszió
3

Nem tudom megcsinálni :(

ParadoxH · 2006. Már. 2. (Cs), 19.03
folyton próbálkozom azzal, hogy egy másik box ot tegyek a navigáció alá, de nem jön össze :(
próbáltam összefogni egy div el a 2 boxot de erre szétesik az egész (a div ami osszefogja a 2 boxot az a kisegito_div a css ben)
kérem, hogy ha vki egy kicsit is tud akkor segitsen.. a kódot alól csatoltam... bocs a nagy terjedelem miatt

előre is köszönöm
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>Alap_site v0.1</tilte>  
  5. <link rel="StyleSheet" href="stilsu2.css" type="text/css">  
  6. </head>  
  7.   
  8. <body>  
  9. <br>  
  10. <div class="alap">  
  11. <!-AZ ALAP DIV ->  
  12.   
  13. <div class="kisegito_div">  
  14. <div class="bal_blokksor">  
  15. <!- KEZDODIK A BAL BLOKK ->  
  16. <div class="blokk_fejlec">  
  17.             Navigacio  
  18. </div>  
  19. <div class="blokk">  
  20. <div class="navigacio">  
  21. <a href="pdx.html">  
  22.                &bull; Fooldal  
  23. </a>  
  24. </div>  
  25.   
  26. <div class="navigacio">  
  27. <a href="pdx.html">  
  28.               &bull; Pdx1  
  29. </a>  
  30. </div>  
  31.   
  32. <div class="navigacio">  
  33. <a href="pdx.html">  
  34.               &bull; Pdx2  
  35. </a>  
  36. </div>  
  37. <div class="navigacio">  
  38. <a href="pdx.html">  
  39.               &bull; Pdx3  
  40. </a>  
  41. </div>  
  42. <div class="navigacio">  
  43. <a href="pdx.html">  
  44.               &bull; Pdx4  
  45. </a>  
  46. </div>  
  47. <div class="navigacio">  
  48. <a href="pdx.html">  
  49.               &bull; Pdx5  
  50. </a>  
  51. </div>  
  52. <div class="navigacio">  
  53. <a href="pdx.html">  
  54.               &bull; Pdx6  
  55. </a>  
  56. </div>  
  57. <div class="navigacio">  
  58. <a href="pdx.html">  
  59.               &bull; Pdx7  
  60. </a>  
  61. </div>  
  62. <div class="navigacio">  
  63. <a href="pdx.html">  
  64.               &bull; Pdx8  
  65. </a>  
  66. </div>  
  67. </div>  
  68. </div>  
  69.   
  70. <br>  
  71. <div class="bal_blokksor">  
  72. <div class="blokk_fejlec">  
  73.             Valami  
  74. </div>  
  75. </div>  
  76.   
  77. <div class="jobb_blokksor">  
  78. <!- KEZDODOIK A JOBB BLOKKSOR ->  
  79. <div class="blokk_fejlec">  
  80.             Ajanlott bongeszo  
  81. </div>  
  82.   
  83. <div class="blokk">  
  84. <a href="http://www.mozilla.com/firefox/all.html"><img src="images/firefoximg.png" style="text-align: center" title="A legjobb alternativ bongeszo. Tolsd le most!" width="135px" height="125px"></a>  
  85. </div>  
  86.   
  87. </div>  
  88.   
  89. <div style="margin-left: 165px; margin-right: 155px;">  
  90. <!- EZ ITT A KOZEP ->  
  91.   
  92. <div class="table">  
  93. <big>EZ EGY KEZDETLEGES ALAP SITE... AMI FOLYAMATOS TESZTELES ES FEJLESZTES ALATT ALL!</big>  
  94. <div style="text-align: justify;">  
  95. szoveg  
  96. <div style=" text-align: right; color: black; text-size:14px; margin-right: 15px;" >  
  97. <p > Coded by </tt>  
  98. <a href="http://paradox.hard-core.hu" > Paradox H. </a>  
  99. </div>  
  100. </div>  
  101. </div>  
  102.   
  103. </body>  
  104. </html>  
  1. body {  
  2.         font-family: Arial, Helvetica, sans-serif;  
  3.         font-size: 10px;  
  4.     color: white;  
  5.     margin-left: 0px;  
  6.     margin-top: 0px;  
  7.     margin-right: 0px;  
  8.     margin-bottom: 0px;  
  9.     background-color: #006400; }  
  10.   
  11.   
  12. a, a:link {  
  13.         font-size: 14px;  
  14.         color: white;  
  15.         text-decoration: none; }  
  16.   
  17. a:visited, a:hover {  
  18.         font-size: 14px;  
  19.     text-decoration: none;  
  20.     color: white; }  
  21.   
  22. a:active {   
  23.         font-size: 14px;  
  24.         color: black;  
  25.         text-decoration: blink; }  
  26.   
  27. .alap {  
  28.   
  29.         width: 998px;  
  30.         margin-left: auto;  
  31.         margin-right: auto; }  
  32.   
  33. .blokk_fejlec {  
  34.         font-size: 11px;  
  35.         text-align: center;      
  36.         font-weight: bold;  
  37.         color: #FFFFFF;  
  38.         height: 16px;  
  39.         background-color: #009302;  
  40.         border-right-width: 1px;  
  41.         border-left-width: 1px;  
  42.         border-top-width: 1px;  
  43.         border-bottom-width: 0px;  
  44.         border-color: #000000;  
  45.         border-style: solid; }  
  46.   
  47. .navigacio a {  
  48.         background-color: #004f01;  
  49.         display: block;  
  50.         border-width: 1px;  
  51.         border-color: black;  
  52.         border-style: solid;  
  53.         padding: 1px 1px; }  
  54.   
  55. .navigacio a:hover, .navigacio a:focus, .navigacio a:active {  
  56.         border-width: 1px;  
  57.         border-color: black;  
  58.         border-style: solid;  
  59.         background-color: #b00006;  
  60.         padding: 1px 10px;  
  61.         -moz-border-radius: 0.5em; }  
  62.   
  63. .bal_blokksor {  
  64.         float: left;  
  65.         width: 150px; }  
  66.   
  67. .jobb_blokksor {  
  68.         float: right;  
  69.         width: 150px; }  
  70.   
  71. .kisegito_div {  
  72.         float: right;  
  73.         width: 155px; }          
  74.   
  75. .table {  
  76.         border-width: 1px;  
  77.         border-color: #000000;  
  78.         border-style: solid;  
  79.         padding-top: 5px;  
  80.         padding-left: 5px;  
  81.         padding-right: 5px;  
  82.         padding-bottom: 5px;  
  83.         margin-bottom: 5px; }  
  84.   
  85. .blokk {  
  86.         border-color: #000000;  
  87.         border-style: solid;  
  88.         border-width: 1px;  
  89.         padding-left: 5px;  
  90.         padding-right: 5px;  
  91.         padding-top: 5px;  
  92.         padding-bottom: 5px;  
  93.         margin-bottom: 5px; }         
"A tudás fontos, mert megtaníthat,
hogy azt is átlásd, ami elvakíthat." Depresszió