Jag har nu skapat min första css-hemsida. Jag tar gärna emot feedback, även fast det kanske inte finns allt för mycket att kommentera ännu. Men sidan kommer bli bättre med tiden.
Nu finns det iaf fyra flikar, startsida (med nyheter), videos, länkar och gästbok.
Tycker att färgvalet på navigationen är märklig. Dessutom flyttas den gråa innehållboxen på sig beroende på fönsterstorlek/skärmupplösning. Mitt tips till dig skulle vara att se till att allt hålls på ett fast ställe, helst i mitten av webbläsaren.
Jo, den färgen är kanske lite märklig :P. Men själva färgen då man håller över knapparna passar. Kanske ska byta ut det rosa på knapparna. Har någon nått tips på vilken färg?
Har för mig att det finns en hemsida (eller hemsidor..) där man kan kolla in sidorna utan att byta själva storleken på riktiga skärmen så att säga. Jag vill gärna se hur den ändrar sig ^^.
↗ till inläggethttp://i23.photobucket.com/albums/b351/Milixi/Others/UoneHemsidaWooWoo.jpgJo, den färgen är kanske lite märklig :P. Men själva färgen då man håller över knapparna passar. Kanske ska byta ut det rosa på knapparna. Har någon nått tips på vilken färg?
Har för mig att det finns en hemsida (eller hemsidor..) där man kan kolla in sidorna utan att byta själva storleken på riktiga skärmen så att säga. Jag vill gärna se hur den ändrar sig ^^.
1440x900
Samma som ExorZ, men om jag drar ihop fönstret lite så blir det rätt.
v2 ute nu!
Helt ny design med nya flikar!.
Betydligt snyggare var den, men centrera sidan och lägg in lite grafik. Den är så tråkigt, ingen färg! ;D
Din hemsida ser ut att passa bra på en PSP eller en mobil, men inte på en dator.
Det är faktiskt min första CSS-hemsida :P. Ska försöka centrera sidan också men har inte lyckats så bra ännu då allt blir fel och man måste ändra allt möjligt i css-filen jag har verkar det som :P
↗ till inläggetNej, enklare än du tror ;)Det är faktiskt min första CSS-hemsida :P. Ska försöka centrera sidan också men har inte lyckats så bra ännu då allt blir fel och man måste ändra allt möjligt i css-filen jag har verkar det som :P
Lägg till margin: auto; i din kolumncontanier.
#kolumncontanier {
...
margin: auto;
}
Om det inte funkar så kom jag på att du kan ändra float: left; till float: middle; .
Annars ta bort float: left; lägg till overflow: hidden; + margin: auto;
Sen på nyheter, varför ha en scrollbox för texten? Blir bara irriterande att läsa då.
Sawny - Ska testas :D
95alexander95 - Är scrollen över texten för dig? tycker själv att det är bra att ha scroll där då blir inte själva nyheter-sidan för stor för min smak. Och det är lätt att sköta det så :P.
Edit
Sawny - fick ingenting att funka tyvärr :/
↗ till inläggetHar du IE?Sawny - Ska testas :D
95alexander95 - Är scrollen över texten för dig? tycker själv att det är bra att ha scroll där då blir inte själva nyheter-sidan för stor för min smak. Och det är lätt att sköta det så :P.
Edit
Sawny - fick ingenting att funka tyvärr :/
html,body {
text-align: center;
}
huvukontanier {
text-align: left;
}
-------
EDIT:
Tror det är annat fel.
Se över din css fil...
http://uone.webege.com/layout.css
----------
---------
body {margin-top: 10px; margin-right: 40px; margin-left: 40px; padding: 0px;}
/* sidlayout */
body {margin: 0; padding: 0;}
#centrering {width: 450px; margin-right: auto; margin-left: auto; margin-left: -225px; margin-top: -175px;}
#kolumncontainer {float: left; width: 47em; border: 1px solid #000000;}
#kolumn1 {float: left; width: 9em; padding: 0.5em;}
#kolumn2 {float: left; width: 33em; padding: 0.5em;}
#kolumn3 {float: left; width: 9em; padding: 0.5em;}
#sidhuvud {height: 2.5em; padding: 0.8em 0 0 0; background: #CCFFFF;}
/* meny */
#menycontainer ul {float: left; margin: 0; padding: 0 0 0 1em;}
#menycontainer li {border: 1px solid #000000; background: #E0FFFF; float: left; display: inline; margin-right: 1em; padding: 0.3em 0;}
#menycontainer ul a {text-decoration: none; padding: 0.3em 1em;}
#menycontainer a:link {color: #000000;}
#menycontainer a:visited {color: #000000;}
#menycontainer a:hover {background: #c5e6e6;
.scrollbox {padding: 10px; height: 100px; width: 200px; border: 1px solid #999999; overflow: auto; background-color: #F1F1EB;}
body { background-image: url(bild.jpg);}
<style type="text/css">
div.img
<style type="text/css">
div.img
{margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
ett, du har 3 body taggar :huh:
body {margin-top: 10px; margin-right: 40px; margin-left: 40px; padding: 0px;}
body {margin: 0; padding: 0;}
body { background-image: url(bild.jpg);}
??
Först margin-top: 10px
sen margin: 0px hur vill du ha det?
------
#centrering {width: 450px; margin-right: auto; margin-left: auto; margin-left: -225px; margin-top: -175px;}
Först centrerar du sidan, sen ångrar du dig å vill istället flytta sidan X px. :P
--------
<style type="text/css">
div.img
<style type="text/css">
ta bort det.
-----
Och massa fler saker. Rensa lite i din CSS fil så blir det nog lättare för dig å fixa nya saker sen, om du
har mer ordning.
Jadu, så kan det gå x).
Tack för hjälpen 95alexander95 och sawny, fixat detta nu iaf :P.
Kolla in den nu, den är rätt centrerad :D
Mycket bättre :)
------
Ska leta upp en guide jag har, som lär dig koda en lite snyggare layout. :P
Om du vill dvs.
OBS KAN FINNAS FEL! BB-KODERNA KAN OCKSÅ VARA FEL PÅ DETTA FORUM.
ska försöka fixa det sen om jag orkar och det finns efterfrågan.
----------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
Långt inlägg, ska fixa.
Förord:
<!-- --> = Kommentarer syns inte på sidan. Bara för å hjälpa kodare.
/* */ = CSS kommentarer. Hjälper oss kodare.
DIV = Berättar att här ska ett CSS element vara.
ID = ett CSS element som bara får används EN gång.
CLASS = ett CSS element som får används FLERA gånger.
Då börjar vi:
Här är layouten vi ska koda idag:
Vi börjar å scanna av layouten hur vi ska koda den, vilken struktur.
Strukturen är själva html koden som avgör och säger till var
alla element ska vara. SEN kommer css koden som genererar bilderna
och deras position.
Vi börjar uppåt och neråt.
Den blåa headern ska ju bara stå och vara.
Inge text i den, eller inget att den ska sträckas ut eller så.
Utan bara en bild.
<html> <head> <title> Min sida </title> </head> <body> <div id="ram"> <div id="header"></div> </div> </body> </html>
Först vanlig HTML, <html>, <head>. ja det bör ni kunna.
Sedan så kommer <div id="ram"> [...] </div>
Den sa jag inget om. Men det kommer vara en
osynlig ram som håller fast layouten så den hålls i mitten av
sidan.
<div id="header"></div>
Kommer bli våran header.
Bild:
----
Det svarta under kan vara en meny, lajv, senaste nyheterna, eller bara en avskärmare.
I vilket fall som hälst så ska den INTE utvidgas om den fylls med text.
Så den kan också bara vara som den är.
DOCK så får vi göra TVÅ divs hära.
För om vi ska ha text i den (lajv/meny) så vill vi ju inte att texten ligger mot kanten.
Så drf måste vi senare använda sk padding(mer om det senare).
Och i IE (dumma IE) så blir allt buggat å konstigt om man har padding i samma div
en bild är i.
Så jag lägger till <div id="nav_text"></div>. Allt den kommer å göra är att fixa till
eventuell text.
<html> <head> <title> Min sida </title> </head> <body> <div id="ram"> <!-- Ram runt allt --> <div id="header"></div> <!-- Headern --> <div id="nav"><div id="nav_text"></div></div> </div> <!-- Slut på ramen --> </body> </html>
Mellan <div id="nav"> och </div> så skrivs Lajv texten in.
Eller menyn eller ingenting, vad man nu vill.
Bild:
---
Sedan så ser vi två kolumner.
Vänster å höger.
Dock så är det en "backgrund" under kolumnera.
Den som är vit och har 3 streck som markera kolumnerna.
Den är lite speciell. Den vet vi ju inte hur stor den ska vara.
Om man skriver massa text ska ju den utvidgas och bli större.
Så vi kommer bara klippa ut en liten bit, som är 2 PX tjock.
Som sedan kommer "repeatas". Alltså visas flera gånger ovan
på varandra. Svårt å förklara men ni kommer se.
<html>
<head>
<title> Min sida </title>
</head>
<body>
<div id="ram"> <!-- Ram runt allt -->
<div id="header"></div> <!-- Headern -->
<div id="nav"><div id="nav_text"></div></div> <!-- Text emellan divarna. T.ex meny.
<div id="midd_box"> <!-- Mitten box -->
</div> <!-- Slut på mitten boxen -->
</div> <!-- Slut på ramen -->
</body>
</html>
Bild:
---
Så då har vi bakgrunden i mitten boxen.
Men sen så ska vi ju ha kolumnerna.
Dessa har vi ju redan en bild för (föregående steg).
Men vi kommer sen behöva säga åt koden
att menyn ska vara på vänster sida.
<html>
<head>
<title> Min sida </title>
</head>
<body>
<div id="ram"> <!-- Ram runt allt -->
<div id="header"></div> <!-- Headern -->
<div id="nav"><div id="nav_text"></div></div> <!-- Text emellan divarna. T.ex meny.
<div id="midd_box"> <!-- Mitten box -->
<div id="left"> <!-- Menyn -->
</div> <!-- Slut på menyn -->
</div> <!-- Slut på mitten boxen -->
</div> <!-- Slut på ramen -->
</body>
</html>
---
Men sen är det ju varannan grå och varannan vit.
Vi kommer nu göra en class då detta kommer använda
flera gånger.
Vi lägger även till <div class="grå/vt_meny_text"></div>
för att texten ska hamna rätt och layouten INTE ska bugga i IE.
<html>
<head>
<title> Min sida </title>
</head>
<body>
<div id="ram"> <!-- Ram runt allt -->
<div id="header"></div> <!-- Headern -->
<div id="nav"><div id="nav_text"></div></div> <!-- Text emellan divarna. T.ex meny.
<div id="midd_box"> <!-- Mitten box -->
<div id="left"> <!-- Menyn -->
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
</div> <!-- Slut på menyn -->
</div> <!-- Slut på mitten boxen -->
</div> <!-- Slut på ramen -->
</body>
</html>
-----
Börjar bli liite trött i mitt skrivande.
Så guiden kanske tappar kvalité nu.
-----
Sen har vi höger sida. Där ska det vara text också.
Så vi gör en osynlig box som ska hålla texten på höger sida.
Och ytterligare en box som säger åt texten att inte vara intill kanten.
<html>
<head>
<title> Min sida </title>
</head>
<body>
<div id="ram"> <!-- Ram runt allt -->
<div id="header"></div> <!-- Headern -->
<div id="nav"><div id="nav_text"></div></div> <!-- Text emellan divarna. T.ex meny.
<div id="midd_box"> <!-- Mitten box -->
<div id="left"> <!-- Menyn -->
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
</div> <!-- Slut på menyn -->
<div id="right"> <!-- Höger box -->
<div id="right_text">
<p> MASSA TEXT </p>
</div>
</div> <!-- Slut på höger box -->
</div> <!-- Slut på mitten boxen -->
</div> <!-- Slut på ramen -->
</body>
</html>
-----------
Nu har vi en HTML sak kvar.
Sen all CSS!!!1111
-----------
Vi ska nu lägga till footern.
Det längs ner.
Och där är det samma sak, en extra DIV pga IE.
<html>
<head>
<title> Min sida </title>
</head>
<body>
<div id="ram"> <!-- Ram runt allt -->
<div id="header"></div> <!-- Headern -->
<div id="nav"><div id="nav_text"></div></div> <!-- Text emellan divarna. T.ex meny.
<div id="midd_box"> <!-- Mitten box -->
<div id="left"> <!-- Menyn -->
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
<div class="grå_meny"><div class="grå_meny_text"> Hem </div></div>
<div class="vit_meny"><div class="vit_meny_text"> Goodiees </div></div>
</div> <!-- Slut på menyn -->
<div id="right"> <!-- Höger box -->
<div id="right_text">
<p> MASSA TEXT </p>
</div>
</div> <!-- Slut på höger box -->
</div> <!-- Slut på mitten boxen -->
<div id="footer"><div id="footer_text">Copyright FTW. Eller ngt.</div></div> <!-- Footer -->
</div> <!-- Slut på ramen -->
</body>
</html>
Bild:
JAAAA NU ÄR VI KLARA MED HTMLEN!
Bara css en kvar..........
Det är själva CSSen som genererar bilderna kan man säga.
-------------
wtf, kan inte posta mer står "Fel:" och så ingenting.. x.x spam skydd? :S
Jag ska nog uppdatera hemsidan, fast då ska den handla om något helt annat. Vi får se hur det blir!
Vill du vara med i diskussionen?
Bli medlem Logga in