Uone

Sawny · 9 Juli 2010

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 :/

Har du IE?

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

--------

div.img

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.

Redigerat 9 Juli 2010 av Sawny

5FJSKFJSKGJES · 9 Juli 2010

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

Sawny · 15 Juli 2010

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.

Hur man kodar en layout (2 kolumner)

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:

http://www.ooba.se/files/7376938.png

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.

Då kan vi skriva:

<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.

Kommer bli våran header.

Bild:

http://www.ooba.se/files/sony/2877_header.png

----

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.

Då lägger vi till:

<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:

http://www.ooba.se/files/sony/5460_nav.png

---

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.

Kod:

<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:

http://www.ooba.se/files/sony/5283_midd_box_big.png

---

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.

Så då lägger vi till

<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.

Så då lägger vi till

<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.

Lägg till:l

<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.

Fötter koden:

<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:

http://www.ooba.se/files/sony/4768_end_box.png

----------

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

Redigerat 15 Juli 2010 av Sawny

5FJSKFJSKGJES · 18 September 2010

Jag ska nog uppdatera hemsidan, fast då ska den handla om något helt annat. Vi får se hur det blir!

Logga in

Uone

Rekommendera inlägg

Sawny

Länk till kommentar

Dela på andra sajter

5FJSKFJSKGJES

Länk till kommentar

Dela på andra sajter

Sawny

Länk till kommentar

Dela på andra sajter

5FJSKFJSKGJES

Länk till kommentar

Dela på andra sajter

Gå med i konversationen

Bläddra

Aktivitet