Skrivet av anon218624:
Kan man runda kanterna på menyn? Jag hargjort den såhär:
<div id="menu" style="background-color: #B8B8B9; height: 500px; width: 200px; text-align: center;">
<br><strong><em>Meny:</em></strong></br>
<br></br>
<a href="hem.html"><br>Hem</br></a>
<br></br>
<a href="historia.html"><br>Historia</br></a>
<br></br>
<a href="lastbilar.html"><br>Lastbilar</br></a>
<br></br>
<a href="personal.html"><br>Personal</br></a>
<br></br>
<a href="kontaktaoss.html"><br>Kontakta oss</br></a>
Hur lägger man till bild från datorn? Till det jag skriver på sweclockers alltså!
Jag tycker du borde lära dig att göra en separat css fil och jobba med den emot html koden.
Arbetet blir så mycket enklare och strukturerat på det sättet.
För att göra detta måste du lägga till en länk i din head tagg som visar var den skall hämta css-koden. (Att göra på detta sätt är standard idag)
För att göra detta, lägger du till en "link" tag i head elementet, såhär:
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
Nu säger du åt HTML att där finns det css-stilar att hämta.
I din mapp ser det exempelvis ut såhär:
C:/minHemsida/index.html <---- Här ligger din index.html
C:/minHemsida/css/styles.css <---- Här ligger din Css-fil.
I din Cssfil kan du skriva cssklasser och/eller tilldela stilar till specifika "id:n" i din HTML kod.
För att göra din meny till exempel så gör du såhär:
HTML:
<div id="menu" ">
<--Din Meny-->
</div>
CSS:
#menu
{
background-color: #B8B8B9;
height: 500px;
width: 200px;
text-align: center;
}
Nu bör du fått samma resultat som om du applicerade stilar direkt i HTML-koden.(förutsatt att du länkat rätt)
menu är ditt id på elementet
För att göra en klass i din CSS-fil byter du helt enkelt ut hashtag(#) innan menu till en punkt(.).
Då använder man istället det reserverade ordet "class" i HTML elementet och då kan det se ut på detta sätt:
HTML:
<div id="menu" class="exempel" ">
<--Din Meny-->
</div>
CSS:
.exempel
{
background-color: #B8B8B9;
height: 500px;
width: 200px;
text-align: center;
}
Denna klass kan du sedan använda på flera ställen i HTML-koden, för att få samma stil på element. Väldigt effektivt om man förskapar olika CSS-klasser man vet att man kommer ha nytta av. exempelvis en "float left" klass osv.
Nu skall jag ta mig tid till att svara på din ursprungliga fråga om rundande hörn.
Anledningen till att jag drog en genomgång av CSS innan jag svarade på detta är att ibland kan det krävas flera olika css-stilar och angivelser för flera olika webbläsare. Ett exempel på detta är just rundande hörn, och beroende på vilken webbläsare man använder och version ser det annorlunda ut hur det skall skrivas. Man kan gardera sig och använda flera olika "rundade hörn" stilar, och den som funkar på en webbläsare kommer att användas, de andra kommer ignoreras. Detta blir snabbt mycket kod, och då är det bra att ha en separat css-fil
Exempel på gardering osv.
.rounded-corners
{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
Det finns också olika kombinationer för border radius.
Exempelvis:
border-top-left-radius: 10px;
Detta ger alltså ett runt hörn längst upp till vänster på elementet.
Går också att skriva:
border-top-left-radius: 10px 0px 0px 0px;
Detta gör samma sak som top-left-radius. Men nu kan du också bestämma andra kanters radius genom att ändra nollorna.
Ordningen går medsols och är då:
topleft | topright | bottomRight | bottomLeft
I Internet Explorer tidigare än version nio(9) är det lite svårare att få det att fungera, då man måste länka till en separat fil och använda den för att runda hörn.
Nu blev min post väldigt lång och mycket att ta in, Men jag hoppas du har fått den hjälp du behöver. Fråga om det var något du inte förstod.
