Hjelp videre med CSS.

Amento · 17. april 2006

Hehe. Tusen takk begge to. får skaffe meg host å teste...

EDIT: glem det... Så på feil source

Men greier ikke å få denne dropdownmenyen til å virke i IE...

Dette er kodene til layeret som jege bruker for dwopdownmenyen:

<div id="Layer1" style="position:absolute; left:0px; top:92px; width:149px; height:673px; z-index:15; background-image: url(Images/Global%20Images/leftmenu_background.PNG); layer-background-image: url(Images/Global%20Images/leftmenu_background.PNG); background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"><font color="#333333" size="1" face="Arial, Helvetica, sans-serif">

<script language="JavaScript" type="text/JavaScript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace»
(" over", "");
  }
  }
 }
}
}
window.onload=startList;

//-->
</script>

<ul id="nav"> 
<ul id='menu'>
     <li><a href="#">Home</a></li>
     <li id='lvl2Services'><a href="#">Firmanavn +</a> 
       <ul id='lvl2ServicesUl'>
         <li><a href="#">Contact us</a></li>
         <li><a href="#">Support</a></li>
         <li><a href="#">The staff</a></li>
         <li><a href="#">Jobs</a></li>
         <li><a href="../Sites/Main/login.PHP">Administration login</a></li>
         <li id='lvl3Forums'><a href="#">Forums +</a> 
           <ul>
             <li><a href="#">Forums</a></li>
             <li><a href="#">Forum rules</a></li>
           </ul>
         </li>
       </ul>
     </li>
     <li id='lvl2Software'><a href="#">Software +</a> 
       <ul id='lvl2SoftwareUl'>
         <li><a href="#">Reviews</a></li>
         <li><a href="#">Game help</a></li>
         <li><a href="#">Articles</a></li>
         <li id='lvl3Software'><a href="#">Downloads +</a> 
           <ul>
             <li><a href="#">Games</a></li>
           </ul>
         </li>
       </ul>
     </li>
     <li id='lvl2Hardware'><a href="#">Hardware +</a> 
       <ul>
         <li><a href="#">Reviews</a></li>
         <li><a href="#">Articles</a></li>
       </ul>
     </li>
     <li id='lvl2Mangaanime'><a href="#">Manga/Anime +</a> 
       <ul id='lvl2MangaanimeUl'>
         <li><a href="#">What is Manga and Anime?</a></li>
         <li id='lvl3Mangaanime'><a href="#">"How to draw manga" guide +</a> 
           <ul>
             <li><a href="#">Chapter.1</a></li>
             <li><a href="#">Chapter.2</a></li>
           </ul>
         </li>
         <li id='lvl3Mangaanime'><a href="#">Downloads +</a> 
           <ul>
             <li><a href="#">Music</a></li>
           </ul>
         </li>
         <li id='lvl3Mangaanime'><a href="#">Gallery +</a> 
           <ul>
             <li><a href="#">Wallpapers</a></li>
             <li><a href="#">Various</a></li>
             <li><a href="#">Avatars</a></li>
             <li><a href="#">Fan art</a></li>
           </ul>
         </li>
         <li id='lvl3Mangaanime'><a href="#">Naruto +</a> 
           <ul>
             <li><a href="#">Story</a></li>
             <li><a href="#">Character biographies</a></li>
           </ul>
         </li>
         <li id='lvl3Mangaanime'><a href="#">Evangelion +</a> 
           <ul>
             <li><a href="#">Story</a></li>
             <li><a href="#">character biographies</a></li>
           </ul>
         </li>
       </ul>
     
   </ul> 
</ul> 
</li>
</div>

CSS:

/* CSS Document */
*
{
padding: 0;
margin: 0;
}

ul#menu li a:hover
{
color: #FF0000;
background-image: url("../Images/Global Images/button_rollover.PNG");
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

window.onload=startList;

ul {
margin: 0;
padding: 6px;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-image: url("../Images/Global Images/button_normal.PNG");
padding: 6px;
border: 1px solid #000000;
border-bottom: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #000000;
}


li#lvl2About:hover ul { display: block; }
li#lvl2Services:hover ul#lvl2ServicesUl { display: block; }
li#lvl2Contact:hover ul { display: block; }
li#lvl2Hardware:hover ul { display: block; }
li#lvl3forums:hover ul { display: block; }
li#lvl2Software:hover ul#lvl2SoftwareUl { display: block; }
li#lvl3Software:hover ul { display: block; }
li#lvl2Mangaanime:hover ul#lvl2MangaanimeUl { display: block; }
li#lvl3Mangaanime:hover ul { display: block; }

Jeg har greid å fikse rollovereffekten, men selve menyen funker ikke. Undernivåene kommer ikke fram osv.

Endret 17. april 2006 av Zathardor

Amento · 18. april 2006

Sliter fortsatt med problemet i posten over, men har også enda et spørsmål...

Planlegger å legge til et forum på siden min. Index-siden skal være hjemmesiden min og på den skal jeg ha en link til forumet. Hvilken fil skal jeg linke til for å linke til forumet?

Amento · 21. april 2006

Har fått problemer med teksten på siden min... Hvis jeg skal ha et nytt avsnitt så må jeg trykke enter 2-3 ganger istedet for en! Hva i alle dager er problemet?

Even. · 21. april 2006

Du bør lage avsnitt med margin i css og ikke med <br />

p {
font-family: "Treebuchet MS", verdana, arial, helvetica;
font-size: 1em;
color: #333333:
margin: 5px 0 15px 0;
}

Sånn circa.

Endret 21. april 2006 av EvoZ

Amento · 21. april 2006

kk. får prøve det Men hva er det egentlig som er problemet?

EDIT: hvordan kopler jeg det sammen med teksten?

Endret 21. april 2006 av Zathardor

Amento · 21. april 2006

Får ikke til å fikse det. Funka ikke med den CSS greia heller...

Hvis jeg skriver:

(...)imperdiet lorem. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices posuere cubilia Curae; Suspendisse 
</font></p><p><font size="2" face="Arial, Helvetica, sans-serif">
idlibero.Suspendisse 
nec leo aliquet lacus placerat vehicula. Donec at enim. Pellentesque habitant(...)

Så blir teksten slik:

imperdiet lorem. Vestibulum ante ipsum primis in faucibus orci luctus et

ultrices posuere cubilia Curae; Suspendisse

idlibero.Suspendisse

nec leo aliquet lacus placerat vehicula. Donec at enim. Pellentesque habitant

Og ikke slik som den egentlig skal være:

imperdiet lorem. Vestibulum ante ipsum primis in faucibus orci luctus et

ultrices posuere cubilia Curae; Suspendisse

idlibero.Suspendisse

nec leo aliquet lacus placerat vehicula. Donec at enim. Pellentesque habitant

Amento · 22. april 2006

fikset det siste problemet Men lurer på en ny ting

her er mitt nye problem:

Har to problemer:

1. Som dere ser er den øverste linjen, "Welcome!" linjen helt på toppen. Hvordan kan jeg få den en linje lenger ned uten å måtte bruke enter eller Shift+enter?

2. Helt til høyre er det en scrollegreie hvis teksten er for lang. Men hvis teksten ikke er for liten så kommer den bort. Vil ha den der hele tiden, men VIL IKKE ha den på bunnen. Hvordan gjør jeg det?

qualbeen · 23. april 2006

fikset det siste problemet Men lurer på en ny ting

her er mitt nye problem:

Har to problemer:

1. Som dere ser er den øverste linjen, "Welcome!" linjen helt på toppen. Hvordan kan jeg få den en linje lenger ned uten å måtte bruke enter eller Shift+enter?

2. Helt til høyre er det en scrollegreie hvis teksten er for lang. Men hvis teksten ikke er for liten så kommer den bort. Vil ha den der hele tiden, men VIL IKKE ha den på bunnen. Hvordan gjør jeg det?

5968334[/snapback]

"welcome"-teksten (eller all teksten) regner jeg med står inne i en div.

Det eneste du trenger å gjøre er å endre margin og/eller padding-atributtet for denne div'en. Om du har puttet overskriften i en <h1>-tag, så bare endre denne til f.eks:

h1{
margin-top:10px;
padding-top:10px;
}

Amento · 23. april 2006

kk. Hva med det å få en scrolle-greie kun på høyresiden, usansett om det er for mye tekst eller ikke? Problemet er at når scrolleknappen ikke er der så kommer teksten helt ut til kanten noe som ikke er så fint... Så må enten ha den der hele tiden eller på en eller annen mte få den på utsiden av tekstboksen...

Even. · 23. april 2006

#tekstting {

overflow: scroll;

height: 400px;

width: 200px;

}

Amento · 23. april 2006

#tekstting {
overflow: scroll;

height: 400px;

width: 200px;

}

5973806[/snapback]

Men det gir også en scrolleknapp under, og den vil jeg ikke ha. Kun en på høyre siden...

arthoz · 23. april 2006

da må du nok finne på noe lurt.

qualbeen · 23. april 2006

men må du virkelig ha scrollbar hele tiden, også når teksten er kort?

Hvis problemet er at tesksten går for langt ut til høyre del av skjermen kan det fikses ved å endre padding-right eller margin-right...

vet ikke om noen metode for å alltid ha vertikal skroll, men ikke horisontal

Amento · 23. april 2006

Får prøve den papping/margin greia da

EDIT: Jepp. Gjorde susen det

Endret 23. april 2006 av Zathardor

Arve Systad · 23. april 2006

Dreamweaver har hovedsaklig to valg, layers eller tables (kan også bruke divs, men det har jeg ikke prøvd). Layers fungere slik at du bestemmer en verdi, for eksempel 20 piksler, som indikerer hvor langt et gitt element skal være fra toppen eller fra venstre marg på siden.

"Layers" i Dreamweaver er div-element stilisert med eit stilark.

Amento · 23. april 2006

Dreamweaver har hovedsaklig to valg, layers eller tables (kan også bruke divs, men det har jeg ikke prøvd). Layers fungere slik at du bestemmer en verdi, for eksempel 20 piksler, som indikerer hvor langt et gitt element skal være fra toppen eller fra venstre marg på siden.

"Layers" i Dreamweaver er div-element stilisert med eit stilark.

5974834[/snapback]

Som betyr at?

Amento · 24. april 2006

Et lite spørsmål angående Forum. Avatars, posts, topics, opplastede bilder, etc, hvor blir dete lagret i et forum? I den plassen du har til webhosten din liksom eller i mySQL databasen?

EDIT: Mozilla firefox ser ikke ut til å bry seg om CSS Jeg har dette i CSS:

div#mainfield {
color: #FFFFFF;
font-family: "Arial";
font-size: 13px;
font-style: normal;
border-right: solid 0px #ddd;
margin-right:20px;
padding-right:20px;
}

Likevel blir teksten i firefox utrolig liten og grå. Funker i IE og Opera...

Hva er problemet?

Firefox ødelegger også layer'ne... Jeg bruker som du er padding-right og i FF gjør dete til at layer'ne også blir 20 pixler lengre, men altså kun i FF og ikke i IE eller Opera...

Endret 24. april 2006 av Zathardor

Amento · 29. april 2006

Har nå lagd en side i CSS og er utrolig stolt Dog har et problem...

Som dere ser så er teksten i hovedfeltet trykt ned. Toppen, altså banneret er en div, menyen er en div og hovedfeltet er en div.

Slik er body'en i HTML'en:

<body link="#063f6a" vlink="#063f6a" alink="#063f6a">
<div id="wrap">
<div id="top">
</div>
 <div id="menu">
 <img src="Images/Global Images/Menu titles/main.PNG"/>
 <h1>
 <a href="#" <span>- Home</span></a><br>
 <a href="#" <span>- Forums</span></a><br>
 <a href="#" <span>- Support</span></a><br>
 <a href="#" <span>- Staff members</span></a><br>
 <a href="#" <span>- Jobs</span></a><br>
 </h1>
 <img src="Images/Global Images/menu_spacer.PNG"/>

 <div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sit amet pede. Nunc sodales metus in sapien. Sed imperdiet justo. Vivamus odio. Nunc ac ligula nec felis accumsan tempus. Vestibulum vitae lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur urna magna, rutrum sit amet, tincidunt sed, consequat consequat, orci. Vestibulum vel enim. Donec sed diam vitae mi laoreet dignissim. Cras nunc leo, convallis id, lobortis lacinia, tincidunt at, ipsum. In hac habitasse platea dictumst.

</div>

</body>

Hvordan får jeg hovedteksten lengre opp?

arthoz · 29. april 2006

Slik er body'en i HTML'en:

 *snip

 <div id="menu">
 <img src="Images/Global Images/Menu titles/main.PNG"/>
 <h1>
 <a href="#" <span>- Home</span></a><br>
 <a href="#" <span>- Forums</span></a><br>
 <a href="#" <span>- Support</span></a><br>
 <a href="#" <span>- Staff members</span></a><br>
 <a href="#" <span>- Jobs</span></a><br>
 </h1>
 <img src="Images/Global Images/menu_spacer.PNG"/>

</div>

*snip

6007884[/snapback]

litt unødvendig bruk av <img /> og <span> der, og rar html. ^^;

Forslag for HTML for menyen

<div id="menu">
<div id="main"><h2>Main Menu</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Staff Members</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
<div id="under"><h2>Undermeny</h2>
Innhold for undermenyen her (jeg tipper du skal ha noe her, siden du har den spaceren?
</div>
</div>

bittelitt av CSS'n:

#under { margin-top: ##px; } /* ## = hvor mye px plass du må ha til spacer */
#under { background: url(menu_spacer.PNG) no-repeat; } /* spacer-bildet er da bakgrunnen til #under, ser penere ut i html'n. */
#menu li { list-style: disc } /* kan skiftes ut med et bilde, sånn at den ser ut som en - eller whatnot, bruk av -<span> er tull imho */

Hvordan får jeg hovedteksten lengre opp?

6007884[/snapback]

Den blir dytta ned enten fordi den ikke floater, er for bred til å få plass, eller fordi du har noe som clearer(CSS) i menyen.

Det hadde vært bedre om du bare hadde pasta link til siden ^^;

(håper det ikke er så mye feil mye feil i koden min, det er natt, varmt og jeg er trøtt )

Edit: Se her ja, fant feilen, ekke greit å være trøtt, du har glemt å stenge meny div'n (</div>)

Endret 29. april 2006 av arthoz

Amento · 29. april 2006

Kan godt hende HTML'en ser rar ut, den første siden jeg har lagd kun med å skrive kode og ikke WYSIWYG-editor.

-Den <li> delen lager en dott foran teksten som jeg ikke vil ha...

-Har ikke undermenyer. Menyen er liksom bare delt opp i flere deler nedover med spaceren.

-Har ikke lagt ut siden enda...

Satte </div> under menyen men da be det sånn:

Hjelp videre med CSS.

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer