blbne CSS

tomco3131 · Napísal **tomco3131**: 23.07.2008 13:04

robim web, kombinacia xhtml a CSS

www.at.gigapc.sk

a to textove pole teda tie texty maju bit v strede a onbi sa mi hadzu pod menu, newiem preco..

tu je css:

Kód:

/*
AT CORPORATION
Code & Design by Slinto Design
web: www.slintodesign.gigapc.sk
*/

body { margin:40px; font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:11px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #0A8FDE; }
a { color:#10639a; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; }
h2 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:16px; color:#10639a; }

#header { background:url(images/header_bckg.jpg) no-repeat top right #0EA5FE;}
#logo { padding:50px 60px 0 40px; height:130px; background:url(images/head_bckg.jpg) no-repeat #0EA5FE; }
#logo a{ font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo_text { float:right; width:200px; font-size:10px; color:#fff; line-height:12px; padding-top:5px;  }
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:0px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;}

#text { margin: 0 1px 0 0; background:url(images/content.gif); padding:10px;}
#text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}

/*LAVA CAST*/
#sidebar { float:left; width:220px; height:550px; padding: 20px 20px 0 30px; font-size:10px; }
#sidebar a{ font-weight:bold; }
#sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}

/*PRAVA CAST*/
#sidebar2 { float:right; width:210px; padding: 0px 10px 0 0px; font-size:10px; }
#sidebar2 a{ font-weight:bold; }
#sidebar2 h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}

/*MENU*/
.navigation {float: left;width: 200px;}
.navigation h2 {color: #5A5A43;font: bold 1.1em Tahoma,sans-serif;line-height: 10px;margin: 0;padding-left: 12px;}
.navigation ul {padding: 0;border-top: 1px solid #EAEADA;}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {font-size: 1.1em;color: #554;display: block;padding: 8px 0 8px 5%;text-decoration: none;width: 95%;}
.navigation li a:hover {background: #F0F0EB;color: #654;   }
#main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top left #fff; }

/*PATA*/
#footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both;  }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}

prosim nekritizovat bordel a podobne:D

jablko05 · Napísal **jablko05**: 23.07.2008 14:46

ono to nema byt takto? http://www.imghosting.eu/view.php?img=texty.gif

tomco3131 · Napísal autor témy **tomco3131**: 23.07.2008 16:31

ano takto to ma byt, kamaratovi ani mne to tak nechce zobrazovat

HAE07 · Napísal **HAE07**: 23.07.2008 16:40

sranda, v IE aj v opere ti to ide dobre,len mozilla neposlucha

don jebot · Napísal **don jebot**: 23.07.2008 17:02

HAE07 píše:

sranda, v IE aj v opere ti to ide dobre,len mozilla neposlucha

to je mi vec ??? uplne normalna zalezistost hraj sa mas tam niekde chybu ... pozri ci mas vsetko uzavrete

p360t · Napísal **p360t**: 23.07.2008 17:12

Ehm, to ako toto myslíš vážne?

Kód:

<div id="text" >
    <p>&nbsp;</p>
    <h2><strong>Ak chceŠ, aby druhÝm zapalovalo,</strong></h2>
    <h2><strong> Tebe musÍ horieŤ</strong></h2>
                <p class="MsoNormal" style='mso-pagination:none'>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <h2><strong>Vedenie vzorom je najväČŠia sila</strong></h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2><strong>Ak chceš vybudovať druhých,</strong></h2>
            <h2><strong> vybuduj najskôr seba </strong></h2>
            <p>&nbsp;</p>
  </div>

V prvom rade si uprac HTML, až potom sa hraj s CSS. Veď to je strašné! Takýto kód sa nedá rozumne upravovať pomocou kaskádových štýlov.

Ešte jedna otázočka, odkiaľ máš tú šablónu???

tomco3131 · Napísal autor témy **tomco3131**: 23.07.2008 18:30

njn, upravim ked bude kusok casu,

sablona no takto aby sme to uviedli na pravu mieru:
je to sablona ale pouzil som to iba nato aby som mal zaklad DIV a podobne, pretoze css sa ucim a newiem ho ete na 100%

p360t · Napísal **p360t**: 23.07.2008 22:39

Použitie šablóny je OK. Odstránenie odkazu na autora, keď je tam navyše výslovne zakázaná takáto manipulácia, je zlé!

Kód:

<div id="right_footer">
<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design &amp; Code by <strong>A&amp;T corporation</strong></div>
</div>
    <!-- end footer -->
</body>
</html>

tomco3131 · Napísal autor témy **tomco3131**: 24.07.2008 9:15

ano mas moztno pravdu, no ja som tu sablonu pouzil len ako predlohu, a potom som prerabal ju. preto si myslim ze som nespravil nieco zle... no nechajme to tak,,

stale mi to blbne newiem ako. ked nastavim toho stredneho "stlpca" staticku velkost je vsetko dobre, ale potom dajme tomu ked to nastavim tak aby to sedelo na rozlyseni 1240 tak potom je na mensich velmi velke,

ked nieje staticka takto to vsecko blbne..newiem si poradit bohuzial:(

GoodWill · Napísal **GoodWill**: 24.07.2008 10:15

chyba bude s najvacsou pravdepodobnostou medzi stolickou a monitorom

"blbne mi CSS" je len ukazkou neschopnsoti priznat si chybu.

keby si coilen trochu hladal/skusal... skus napr svojmu divu s idckom main nastavit width: 100%;

p360t · Napísal **p360t**: 24.07.2008 11:09

Problém je, že tie tri obrázky na pravej strane sú v skutočnosti jeden obrázok. To znamená, že ich musíš dať na pozadie jednému prvku, do tohto prvku sa však ťažko rozmiestňuje text do výšky. Preto by bolo lepšie rozdeliť to na 3 samostatné obrázky. Optimálne by tvoj HTML kód mal vyzerať takto:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>A&T Corporation</title>
  </head>
  <body>
    <h1>A&T Corporation - ponúkame rôzne možnosti zárobku</h1>
    <h2>
      Ak chceš, aby druhým zapalovalo, Tebe musí horieť
    </h2>
    <h2>
      Vedenie vzorom je najväčšia sila
    </h2>
    <h2>
      Ak chceš vybudovať druhých, vybuduj najskôr seba
    </h2>
    <ul>
      <li><a href="o%20nas.html">Domov</a></li>
      <li><a href="o%20nas.html">Poslanie</a></li>
      <li><a href="ufo%20a%20aaj.html">Kontakt</a></li>
      <li><a href="psychotronika.html">Spolupráca</a></li>
      <li><a href="tajomne%20miesta.html">Projekty</a></li>
      <li><a href="anomalne%20javy.html">Vízia</a></li>
      <li><a href="kontakt.html">Hodnoty</a></li>
      <li><a href="napiste%20nam.html">Pravidlá</a></li>
    </ul>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Phasellus ornare condimentum.<em><strong>Nemo enim</strong>
      ipsam voluptatem quia voluptas sit aspernatur aut
      odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
      voluptatem sequi nesciunt.</em>
    </p>
    <p>
      2008 &copy; A&amp;T corporation
    </p>
    <p>
      Design by <strong>A&amp;T corporation</strong>; Code by p360t
    </p>
  </body>
</html>

Toto je solídny sémantický základ, ktorý ešte treba nadstaviť CSSkom. Na to pridáme nejaké tagy a označíme selektormi významné prvky:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>A&T Corporation</title>
    <style>
      @import url('style.css');
    </style>
  </head>
  <body>
    <div id="page">
      <h1>A&T Corporation - ponúkame rôzne možnosti zárobku</h1>
      <div id="col_main">
        <h2 id="h_first">
          Ak chceš, aby druhým zapalovalo,<br> Tebe musí horieť
        </h2>
        <h2 id="h_second">
          Vedenie vzorom je najväčšia sila
        </h2>
        <h2 id="h_third">
          Ak chceš vybudovať druhých,<br> vybuduj najskôr seba
        </h2> 
      </div>
      <div id="col_side">
        <ul>
          <li><a href="o%20nas.html">Domov</a></li>
          <li><a href="o%20nas.html">Poslanie</a></li>
          <li><a href="ufo%20a%20aaj.html">Kontakt</a></li>
          <li><a href="psychotronika.html">Spolupráca</a></li>
          <li><a href="tajomne%20miesta.html">Projekty</a></li>
          <li><a href="anomalne%20javy.html">Vízia</a></li>
          <li><a href="kontakt.html">Hodnoty</a></li>
          <li><a href="napiste%20nam.html">Pravidlá</a></li>
        </ul>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Phasellus ornare condimentum.<em><strong>Nemo enim</strong>
          ipsam voluptatem quia voluptas sit aspernatur aut
          odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
          voluptatem sequi nesciunt.</em>
        </p>
      </div>
      <div id="footer">
        <p id="copy">
          2008 &copy; A&amp;T corporation
        </p>
        <p id="author">
          Design by <strong>A&amp;T corporation</strong>; Code by p360t
        </p>
      </div>
    </div>
  </body>
</html>

A môžme začať čarovať s CSS:

Kód:

/* layout */

body {
  margin: 0;
  padding: 0;
  color: #000;
  background: #DEE3E9 url('images/bckg.jpg') repeat-x top;
  text-align: center;
  font-family: tahoma;
}

#page {
  width: 1200px;
  border: 1px solid #000;
  margin: 30px auto;
  text-align: left;
  background: #fff;
}

#col_main {
  float: right;
  width: 78%;
}

#col_side {
  float: left;
  width: 20%;
}

/* header */

h1 {
  padding: 0;
  margin: 0;
  width: 1200px;
  height: 181px;
  color: #000;
  background: #fff url('images/head_bckg.jpg') no-repeat top left;
  text-indent: -50000px; /* skryjeme text v tagu <h1> */
}

/* footer */

#footer {
  clear: both;
  height: 55px;
  color: #fff;
  background: #2C9DE0 url('images/footer_bckg.gif') repeat-x top;
}

#copy {
  float: left;
  padding-left: 50px;
}

#author {
  float: right;
  padding-right: 50px;
}

/* col main */
#col_main h2 {
  height: 168px;
  margin: 30px;
  padding: 0;
  background: #fff;
  color: #10639A;
  text-transform: uppercase;
}

#col_main #h_first {
  background: #fff url('images/h_first.png') no-repeat top right;
}
#col_main #h_second {
  background: #fff url('images/h_second.png') no-repeat top right;
}
#col_main #h_third {
  background: #fff url('images/h_third.png') no-repeat top right;
}

Zvyšok si už istotne dokážeš dorobiť sám. Pozrel som sa na to v Opere 9.5, Firefoxe 3 aj Internet Explorer 7, je možné, že IE6 tak pekne spolupracovať nebude (ale teraz nemám k dispozícii počítač s IE6). Ešte predpokladám, že si rozdelil right_img.png na tri obrázky, h_first.png, h_second.png a h_third.png.

tomco3131 · Napísal autor témy **tomco3131**: 24.07.2008 17:17

pre GoodWilla: Prepac, nabudude temu poemnujem nejako schopnejsie...napriklad ze Som KKT a newiem napravit svoju chybu,,,nepomahajte mi lebo som sprosty...

a neboj, tu tvoju moznost tom skusal uz davno...niesom az taky krepy zeby ma to nenapadlo:)

pre p360t: Dakujem ti krásne, zacinam z opravou mam uz ropzdelene obrazky a zatial to ide paradne, akurat ten lavy div sa mi rozosral, ten napravim a bude to skvele..este raz diki kamo

si borec:)

don jebot · Napísal **don jebot**: 24.07.2008 18:24

tomco to si nevsimaj to je tu vzdy najpr je tu niekto novy a po nejakom case sa tu citi ako pan boh a robi sa najmudrejsi na svete...ak sem bude s chodit zacni si zvykat a pousmej sa nad tym

blbne CSS

Podobné témy