Kære gæst, velkommen til Tweak.dk. Hvis dette er dit første besøg her, bør du læse Hjælp. Her forklares i detaljer hvordan denne side fungerer. For at benytte alle funktionerne på denne side, bør du overveje at lade dig registrere. Benyt venligst registreringsformularen for at registrere her eller læs yderligere information om registreringsprocessen. Hvis du allerede er registreret, så log på her.

1

tirsdag, 7. april 2009, 14:37


Jeg er lige igang med min første hjemmeside. Leger lidt med style sheets, men er løbet ind i et "lille" problem.

Når jeg laver en inline menubar med et par tekst knapper, ender der med at være et par millimeters mellemrum imellem hver knap som i kan se her:



Har I nogen løsning på dette?




Koden har i her:


<head runat="server">
<title>StevenTest</title>
<style>#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
position:relative;
text-align: center;
top:94px;
}

#navcontainer ul li
{
display: inline;
}

#navcontainer ul li a
{
text-decoration: none;
padding: 0.65em 2em;
color: #fff;
background-image: "knapback.bmp";
border-top: 1px solid #7f7f7f;
border-bottom: 1px solid #7f7f7f;
border-left: 1px solid #7f7f7f;
border-right: 1px solid #7f7f7f;
}

#navcontainer ul li a:hover
{
color: white;
background-color: #369;
}

</style>
</head>



<body background="tester.bmp">
<form id="form1" runat="server">

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>


</form>
</body>


2

tirsdag, 7. april 2009, 16:24


Hejsa

Kan ikke umiddelbart se hvorfor ud fra din kode..

Men jeg vil anbefale dig firebug til firefox ;)

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

3

tirsdag, 7. april 2009, 17:32


Du bør dog heller ikke lave dine knapper "inline", men i stedet for bør du være "block". Dette skal iøvrigt påføres dine links, altså "a"

Når du vil have dem til at stå ved siden af hinanden, så bruger du "float: left;" - husk dog at påfører dette til både "li" og "a" ellers giver IE6 problemer.

Grunden herfor er, at knapperne gerne skal fungerer som block-elementer.

Bagefter kan du såmænd nemt styre afstanden vha. af margin.

Håber, at det gav mening?

Ellers er der et hav af eksempler at finde hos Listamatic

http://css.maxdesign.com.au/listamatic/index.htm


4

onsdag, 8. april 2009, 10:14


Jeg har set deres foreslag igennem, men kan ikke helt bedømme hvilken jeg skal benytte for at give den ønskede effekt.

For at give en ide om hvordan jeg ønsker at det endelige resultat skal se ud, har jeg lige lavet denne skitse.

Som det fremgår på billedet skal det hele være centreret.
Det jeg oplever med alle de menuer som fremgår under "Horizontal lists" på maxdesign siden, er at de folder sig sammen hvis man trækker browser vinduet sammen. På en eller anden måde ønsker jeg at låse det hele inde i en stor lodret firkant, hvor jeg så nærmest "ud fra pixel" kan bestemme hvor de forskellige objekter skal være. :roller:

Det er nok ønsketænkning, men dette er som sagt første gang jeg leger med hjemmeside, så ved ikke lige hvordan og hvorledes.



For at give en ide om hvordan, siden skal fungere, så har man menuen i toppen "giver lidt sig selv" men jeg ønsker at denne lille trekant følger med markøren når man glider hen over de forskellige knapper.

Derunder "til venstre" har man endnu en lille 3 knappers lodret menu, hvilket ved markering ændre billedet til højre for denne. Dette billede giver blot en indication om hvad emnet drejer sig om. Når man klikker på en af disse menu knapper eller billedet, har man emnet med tekst/billeder/film osv i bunden.



Hvordan bør jeg gribe dette projekt an?


5

onsdag, 8. april 2009, 10:47


Du kan centrer med:
margin: 0 auto;

Det med trekant over aktiv menu er vel bare at bruge a.hover så viser den jo det du har sagt under a.hover når du holder musen over.

Intel i5-4690K @ 4,7ghz
Coolmaster EVO212
ASUS Z97-A
Crucial Ballistix Sport 2x4GB
Crucial MX100 240GB SSD
Gigabyte 970 G1 4GB
Fractal Design Arc Midi R2

6

onsdag, 8. april 2009, 15:10


Jeg har fået det til at se nogenlunde ud nu, som kan ses på billedet herunder.



Det virker som lidt af en snyde løsning, men tilføjede følgende kode for at lukke huldet imellem knapperne:

#navcontainer ul li a
{
margin-left: -2px;
margin-right: -2px;
...

Samtidig var jeg nødt til at fjerne følgende for at få det til at se nogenlunde ud i FireFox:

<style>#navcontainer ul
{
margin: 0;
padding: 0;
...

Den lille trekant var nem at tilføje med:

#navcontainer ul li a:hover
{
margin: center auto;
background-Image:url("trekant.bmp");
background-repeat: no-repeat;
background-position: center;
background-position: top;
}

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

Havde selvfølgelig håbet på at få stregerne imellem knapperne til kun at være 1 pixel. Men er altså ikke lykkedes mig. En ting som jeg nu istedet må have undersøgt er om jeg kan ændre musemarkøren fra at være en Tekst indikator "det store I", til at være Pil markøren når den glider hen over stregerne "som åbenbart bliver opfanget som tekst mellemrum"...

Edited:

Det var jo bare at tilføje: (Men virker kun i IE) X(

#navcontainer ul li
{
cursor: default;
}

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "steven" (08.04.2009, 15:19)


7

onsdag, 8. april 2009, 15:53


Største problem er dog at knapperne skrumper sammen når ens Explore vindue minimeres.

Så hvis I har en bedre løsning er jeg meget intereseret, da jeg hellere ønsker at låse det hele fast med eneste variable værene Center...



Nyeste Videoer og Trailers

Indsend nyhed
Har du fundet en fed nyhed så indsend den så alle andre på Tweak.dk kan få glæde af den.