Hoppa till innehåll

Uone

5FJSKFJSKGJES

Av 5FJSKFJSKGJES,
i Feedback

 Dela

Rekommendera inlägg

Sawny Newbie

Sawny

Skrivet
Skrivet (redigerat)

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

--------

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

Redigerat av Sawny
Länk till kommentar
Dela på andra sajter
Sawny Newbie

Sawny

Skrivet
Skrivet (redigerat)

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.

<div id="header"></div>

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 av Sawny
Länk till kommentar
Dela på andra sajter
  • 2 månader senare...

Gå med i konversationen

Du kan skriva nu och registrera dig senare. Om du har ett konto, logga in nu för att posta med ditt konto.

Gäst
Svara på det här ämnet...

×   Klistrade in som rich text.   Klistra in som vanlig text istället

  Endast 75 emojis är tillåtet.

×   Din länk har automatiskt inbäddats.   Visa som en länk istället

×   Ditt tidigare innehåll har återställts.   Rensa redigeraren

×   Du kan inte klistra in bilder direkt. Ladda upp eller infoga bilder från URL.

×
 Dela
Gå till ämneslistan
×
×
  • Skapa ny...

Copyright 2000-2024 Crownberry AB | Integritetspolicy