Kuulkaas te taitavammat immeiset tämän CSS jutun kanssa, voisitteko mahdolliseti auttaa pientä :D ?
Leikin tässä ajan kuluksi Photoshop Elements 7:lla ja sain kyhättyä tälläisen simppelin pohjan omalle webbisivulle, mutta kun sitten yritin kyhätä siihen boxeja, niin johan meni nakit ja muusit sekaisin.
Tässä tulos: http://www.freewebs.com/midnightheaven/midnightheavenstables/index.html
tarkoitus olisi siis saada kasaan:
navigation(5 linkin paikka) (eivät olleet oikeassa kohtaa koodauksessa)
alapuolelle päivitys laatikko
iso alue olisi tekstille johon linkit poppaisivat tekstiä
sitten joku sekalainen laatikko ja sen alapuolelle laatikko ulos meneviä linkkejä
yritin itse laittaa niitä eri nimillä, esim #updates ja #links styling osiossa mutta meni kaikki vaan ihan sekaisin ja tuntuu etten oikeen tajua mikä meni pieleen.
Heitti esim content framen ihan muualle kuin mihin sitä yritin asettaa px (käytin PSE7 niitä X, Y etc sijoittamiseen.
Olen yrittäny selata noita erilaisia HTML sivuja läpi avun tarpeessa muttei mitään apua löytynyt vaan erilaista selitystä miten tableja ei kannata käyttää ja miten divejä suositellaan...
Jos siis joku viitsisi auttaa kyhäämään Diveillä tuon ulkoasun niin olisin erittäin kiitollinen!
Divejä? apua tarvitsen
5
392
Vastaukset
- gfghjk,l..ö--ä'ä
lue ja opi:
http://www.w3schools.com/css/css_examples.asp
:) - melina_mimiedesign
Hei
Mä suosittelen että luet seuraavan kirjan: bulletproof web designing 2nd edition. Jos et koko kirjaa jaksa lukaista läpi niin ainaskin 4 ensimmäistä kappaletta :)
Siinä kirjassa on opettu kaikki mahdollinen css:n käytöstä ja diveistä.
Ja toinen nettisivu mistä on hyvä aloittaa on http://www.w3schools.com/ :)
www.mimiedesign.com - CSS-mannn
Kyhäsin tuossa pikaisesti jotain jolla voisit päästä alkuun (jatkuu "bodyn" kohdalta seuraavassa viestissä)
-----------------------------------
body {
background-color: #7D7463;
font-family: Tahoma;
color:#ede4db;
margin: 35px 0;
}
p {
font-family:Tahoma;
font-size: 12px;
text-decoration: none;
padding: 0;
margin: 0 0 5px 0;
}
h1, h2, h3 {
padding: 0;
margin: 12px 0 12px 0;
}
h1 {
font-family:Tahoma;
font-size: 20px;
text-decoration: none;
}
h2 {
font-family:Tahoma;
font-size: 16px;
text-decoration: none;
}
h3 {
font-family:Tahoma;
font-size: 14px;
text-decoration: none;
}
td {
font-family:Tahoma;
font-size: 13px;
text-decoration: none;
padding: 6px;
}
A:link, A:visited, A:active {
cursor: default;
text-decoration: underline;
font-family: Tahoma;
font-size: 12px;
color: #ede4db;
}
A:hover {
cursor: help;
text-decoration: underline;
font-family: Tahoma;
font-size: 12px;
color:#b5bb7d;
}
a.nav,a.nav:link,a.nav:visited {
cursor: default;
text-decoration: none;
font-family: Tahoma;
font-size: 12px;
color: #ede4db;
}
a.nav:hover {
cursor: help;
text-decoration: none;
font-family: Tahoma;
font-size: 12px;
color:#b5bb7d;
}
/* DIVIT */
div#kehys {
margin: 0 auto;
width: 990px;
}
div#vasenkehys {
float: left;
margin: 0;
width: 182px;
height: 100%;
}
div.sisalto_reunat {
margin: 0 0 25px 0;
border: 1px solid #DFB878;
}
div.sisalto_reunat p {
margin: 0 10px 10px 10px;
}
div.ruskeapalkki {
margin: 2px;
padding: 7px 0 7px 0;
background: #56311F;
text-align: center;
}
div.ruskeapalkki h3 {
margin: 0;
padding: 0;
}
div#keskikehys {
float: left;
margin: 0 25px 0 25px;
width: 570px;
height: 100%;
border: 1px solid #DFB878;
}
div#keskiosantausta {
float: left;
margin: 2px;
background: #9D8169;
min-height: 600px;
}
div#keskiosansisalto {
float: left;
margin: 30px;
}
div#oikeakehys {
float: left;
margin: 0;
width: 182px;
height: 100%;
}
div#copy {
float: left;
margin: 7px 0;
width: 100%;
text-align: center;
}
div#copy p {
font-family: Times;
}
/* DIVIT PÄÄTTYY */- CSS-mannn
Linkki 1
Linkki 2
Linkki 3
Linkki 4
Linkki 5
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
Lorem ipsum dolor
Nam felis elit
Quisque tempor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Quisque tempor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
© Nam felis elit, sollicitudin id, ultrices faucibus - neitonen ei osaa
CSS-mannn kirjoitti:
Linkki 1
Linkki 2
Linkki 3
Linkki 4
Linkki 5
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
Lorem ipsum dolor
Nam felis elit
Quisque tempor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Quisque tempor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.
© Nam felis elit, sollicitudin id, ultrices faucibusSuuret kiitokset!
Luulin jo ettei kukaan auta :3
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Kuka oli töllöntyön tekijä?
Ketä on nyt pidätetty? Oliko syy mustasukkaisuus tyttöystävästä tai oliko muita lieventäviä seikkoja? Katuuko tekijä nyt253920Kotikasvatus siitä se lähtee eli missä meni vikaan että lapsesta tuli puukottaja
Ottakaa muut oppia, normaali kotielämä. Ei liikaa edes hengellisyyttä.441999Kun kohtaat jotain ainutlaatuista
ja upeaa, johon rakastut ehkä ensimmäistä kertaa ihan tosissaan. Sitten sähläät kaiken omien epävarmuuksien vuoksi. Eikö421273- 771145
Ei tämä enää tervettä oo
Sydän pamppaillen oon jo tunnin meinannu laittaa sulle viestiä... Sormi tärisee lähetä kuvakkeen kohdalla.251086Mua ahdistaa
Tämä juttu. Miksi nainen torjuit minut vaikka kiinnostuksen merkkejä oli? Eihän tämän jutun olisi tarvinut johtaa sen pi341078Perämoottoreiden huolto melkoisen kallista
Minulla on tuollainen keskikokoinen perämoottori ja yleistä merkkiä. Kyselin sille keväthuoltoa paikallisista liikkeistä46988Tanskademarit: ilman risusavottaa ei rahaa!
Näin persuna on pakko ihailla noita Tanskan demareita. Tanskalaisessa sosiaalidemokratiassa ei työtön saa rahaa ellei os173851- 56823
Pub Marjuskan grillibileet
Pub marjuskassa ilmainen makkara tarjoilu ja jakaa parille sadalle aurinko laseja. Miten tälläistä. Saako popittaa ja ja12743