jpg to html

Forumul Softpedia > Professional Zone > Webmaster Corner > Web Design / Flash / Graphix

digitalsin
28th September 2009, 22:59


Am mare nevoie de ajutor, de ghidare, in general, nu vreau mura in gura dar doar niste corecturi/sugestii, e practic un examen inaintea angajarii, la care voi lucra toata noaptea.

Am jpg-ul atasat, trebuie sa il fac html folosind css, am mai facut asta dar acum vreau sa o fac cu dreptul, ca nu am timp sa repar probleme cu fixuri poimaine cand il prezint, sa-mi fuga textul din div-uri, sau mai stiu eu ce alte minuni. (am "camuflat" din motive de inteles).

Eu intentionez sa creez un container cu div lung pt header, unul pt meniu, inca unul pt meniul de mai jos, apoi unul in care impart apoi in doua, in cel stanga vor fi alte doua divuri, unul peste altul, iar in dreapta, un singur div, e bine cum fac?

Cum sa le pozitionez sa nu imi intre unele peste altele? Stiu, am resurse gramada si sunt deja layout-uri facute, dar nu gasesc nimic in stilul asta, am incercat ceva, si sunt oarecum disperat acum.

Multumesc.
unu
28th September 2009, 23:38
pai ce e asa greu?

faci divurile alea din mjloc de 70%/30% si le dai float:left (sa nu uiti clear dupa ele)
alea 4 casute de jos le bagi in ala de 70% si le faci de 25%. le aliniezi tot cu float:left;

in fiecare div din asta ce are lungime in procente mai bagi un div pt continut. pe ala poti pune padding sau margin pt spatiu...
 
digitalsin
29th September 2009, 00:10
Cu asta imi prinde contur:


CODE
<div class="container">
<body>
<div class="header"></div>
<img src="logo.jpg" />
<img src="search.jpg" />
<img src="go30x42.jpg" />

<div class="info"></div>
<div class="links"></div>

<div class="content">
<div class="left"><img src="contentleft.jpg" /></div>
<div class="right"><img src="contentright.jpg" /></div>
</div>

</div>
</body>


Le-am sparg in mici jpg-uri, sa conturez, si de abia apoi intru pe fiecare div in parte sa-l customizez.
Se vede ok pt inceput, nu inteleg insa de ce se strica div-urile atunci cand pun logo, search si go, in div-ul header. Gata, am reusit acum, i-am dat width de 100%.

E bine cum am inceput? Sa continui asa? Adaugiri/schimbari pe care trebuie sa le fac acum, sa nu ma iau cu mainile de cap apoi?

unu, am facut doua clase left/right de 70/30% width, le-am pus in container, tu zici acum sa mai fac un container in cel de 70, tot in procente, si in ala alte 4 de cate 25%, si apoi bag cate o casuta pt fiecare in parte?
unu
29th September 2009, 00:28
aoleu.. eu credeam ca stii ceva css...

imaginile alea nu le bagi asa direct in html. alea ar trebui sa fie imagini de fundal in css pe un div.
de exemplu style="background: url(imagine.jpg) no-repeat left top;"

incearca asta:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>...</title>
</head>

<body>

<div style="width: 980px; margin: 0 auto;">

  <div style="background: #000; border-bottom: 1px solid #333; height:80px; color:#fff; position: relative;">
      <div style="width: 200px; margin:0 auto; border: 1px solid #fff;">search</div>
      <div style="position: absolute; right: 0; top: 0; background: #2E8B57">cosu....</div>

      antentu'
  </div>

  <div style="background: #FF8C00; border-bottom: 1px solid #333; height:20px;">
      meniu'
  </div>

  <div style="background: #000; color:#fff;">
    <div style="float: left; width: 70%; background: #fff; color: #000; min-height: 500px; position: relative;">
      stanga

       <div style="position: absolute; bottom: 0; left: 0; width: 100%;">
          <div style="width: 25%; float:left; background: #cc22dd; min-height: 40px;"> casuta 1 </div>
          <div style="width: 25%; float:left; background: #eeee56; min-height: 40px;"> casuta 2 </div>
          <div style="width: 25%; float:left; background: #ff5566; min-height: 40px;"> casuta 3 </div>
          <div style="width: 25%; float:left; background: #99ffff; min-height: 40px;"> casuta 4 </div>
       </div>

    </div>
    <div style="float: left; width: 30%;">
      dreapta'

    </div>
    <div style="clear:both;height:1px;"></div>
  </div>

</div>

</body>

</html>


n-am mai pus clase ca te incurcam si mai mult..
digitalsin
29th September 2009, 00:50
Multumesc frumos, acum ma apuc.
digitalsin
29th September 2009, 05:18
css:
CODE
body {
background-color:#000;
}

#clear {
clear:both;
height:1px;
}

#container {
width: 954px;
margin: 0 auto;
}

#header {
background: #000;
border-bottom: 1px solid #333;
height:80px; color:#fff;
position: relative;
}

#info {
background: #FF8C00;
border-bottom: 1px solid #333;
height:20px;
}

#menu {
background: #FF8C00;
border-bottom: 0px solid #333;
height:35px;
}

#content {
background: #000;
color:#fff;
}

#contentleft {
float: left;
width: 70%;
background: #fff;
color: #000;
min-height: 324px;
position: relative;
}

#contentright {
float: left;
width: 30%;
}

.buttons {
width: 100%;
height:35px;
float: left;
min-height: 20px;
}

.box {
width: 25%;
height:57px; /*pe marimea butoanelor, e bine?*/
float:left;
min-height: 40px; /*de ce 40?*/
}

.boxcontentleft {
width: 100%;
height:267px;
float:left;
min-height: 40px;
}

.boxcontentright {
width: 245px; /*de ce nu mi-a mers cu 100%?*/
height:324px; /*pe marimea imaginii din content, e bine?*/
float:left;
min-height: 40px;
}


html:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<html>

<head>
<title>.....</title>
<link rel="stylesheet" href="blu.css" type="text/css">
</head>

<body>

<div id="container">

<div id="header">

<div style="width: 200px; margin:0 auto; border: 1px solid #fff;">Search</div>
<div style="position: absolute; right: 0; top: 0; background: #2E8B57">Basket</div>

ANTET.

</div>


<div id="info">

Financing available &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Free shopping &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Why buy from us? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
My profile &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Delivery &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Contact us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</div>

<div id="menu">

<div class="buttons" style="background: url(b1.jpg) no-repeat left top; width: 75px;"></div>
<div class="buttons" style="background: url(b2.jpg) no-repeat left top; width: 102px;"></div>
<div class="buttons" style="background: url(b3.jpg) no-repeat left top; width: 96px;"></div>
<div class="buttons" style="background: url(b4.jpg) no-repeat left top; width: 102px;"></div>
<div class="buttons" style="background: url(b5.jpg) no-repeat left top; width: 139px;"></div>
<div class="buttons" style="background: url(b6.jpg) no-repeat left top; width: 117px;"></div>
<div class="buttons" style="background: url(b7.jpg) no-repeat left top; width: 117px;"></div>
<div class="buttons" style="background: url(b8.jpg) no-repeat left top; width: 106px;"></div>
<div class="buttons" style="background: url(b9.jpg) no-repeat left top; width: 100px;"></div>

</div> <div id="clear">

</div>

<div id="content">
<div id="contentleft">

<div class="boxcontentleft" style="background: url(contentleft.jpg) no-repeat left top;"></div>


<div class="box" style="background: url(button1.jpg) no-repeat left top;"></div>
<div class="box" style="background: url(button2.jpg) no-repeat left top;"></div>
<div class="box" style="background: url(button3.jpg) no-repeat left top;"></div>
<div class="box" style="background: url(button4.jpg) no-repeat left top;"></div>

</div>



<div class="contentright">

<div class="boxcontentright" style="background: url(contentright.jpg) no-repeat left top;"></div>



</div>

<div id="clear"></div>



</div>

</body>

</html>


Am folosit si clase (stiu care e diferenta cred, clasele pot fi folosite de mai multe ori si au punct in fata, in loc de #, in css), am folosit un css extern, imi este mai usor. Codul asta e vizibil, e cat de cat curat? Mai am partea de sus, ca am inceput invers, ma culc pt vreo 5 ore, ca e 4AM acum, as vrea insa sa aflu care e cea mai buna metoda de a face div-urile link, am citit cateva posturi prin alte parti si sunt confuz acum.

De asemenea, link-urile alea din info o sa le pun text, e musai sa le pun tot in div? Al doilea link imi coboara jos, daca folosesc div, si tot asa.. si nu cred ca pot folosi text chior cu &nbsp.

Si inca ceva, de ce e mai bine cu imagini pe background-ul div-ului in loc de o inserare simpla? Ca e mai usor de tinut in frau/aliniat, in div?
digitalsin
29th September 2009, 12:46
In al doilea div de dupa header am pus in css asa:

CODE
.infotext {
font-family:Arial;
font-size:12px;
background: #000000;
color: #fff;
float:left;
height:20px;
padding-left:10px;
}

#info {
background: #000000;
border-bottom: 0px solid #333;
height:20px;
}


Iar in HTML folosesc:
CODE
<div id="info">

<div class="infotext" width:100%px;">Financing available</div>
<div class="infotext" width:100%px;">Free shopping</div>
<div class="infotext" width:100%px;">Why buy from us?</div>

<div class="infotext" width:100%px;">My profile</div>
<div class="infotext" width:100%px;">Delivery</div>
<div class="infotext" width:100%px;">Contact us</div>

</div>


Cum fac sa aliniez ultimele trei div-uri, la dreapta? (My profile, Delivery, Contact us)
Le pun in alt div?! Alta cale mai simpla nu exista?
 
digitalsin
29th September 2009, 13:17
S-a rezolvat:

CODE
<div id="info">

<div class="infotext">Financing available</div>
<div class="infotext">Free shopping</div>
<div class="infotext">Why buy from us?</div>

<div style="float:right; padding-right:8px;">
<div class="infotext">My profile</div>
<div class="infotext">Delivery</div>
<div class="infotext">Contact us</div>
<div class="infotext">Help & FAQ</div>
</div>
</div>
unu
29th September 2009, 14:21
nu trebuie sa pui fiecare link intr-un div...

nu e mai simplu:

CODE
<div style="float:right:">
  My profile | Delivery | Contact us
</div>


?


QUOTE
Si inca ceva, de ce e mai bine cu imagini pe background-ul div-ului in loc de o inserare simpla? Ca e mai usor de tinut in frau/aliniat, in div?

ca sa poti pune text deasupra lor (+ multe alte avantaje)
digitalsin
29th September 2009, 22:03


Am pus fiecare link intr-un div ca sa nu folosesc caracterul ala sau sa evit &nbsp;-urile.

unu, mai am cateva mici nelamuriri, si nu pot posta versiunea facuta aici, daca ai 2 minute libere, iti poti citi mesajele personale, te rog?
digitalsin
30th September 2009, 20:34
Codul e validat, si html-ul si css-ul, am o singura eroare in CSS, legata de pozitioarea unui img cu "no-repeat left top", asupra caruia o sa revin mai tarziu, ca altfel nu imi sta un buton d-ala de sus acolo unde vreau.

In IE7 se vede naspa, unul dintre butoanele alea mari de jos fuge iar doua texte pozitionate relativ, nu stau pe locul care ar trebui sa stea. Din cate vad si inteleg, e din cauza ca div-ul ala se largeste, ca se duce in jos, si butoanele dupa el, acum incerc sa le pozitionez fata de top si left, nu bottom.

Am atasat un printscreen, aveti vreo sugestie pt mine, va rog?
Aceasta este o versiune simplificatã a paginii originale. Pentru a vizita versiunea originala click aici.