HR vertical

Geov · Posted: 08-04-2016, 17:18:55 | Translate post to: ... (Click for more languages)

Tot caut de ceva zile daca pot face o linie verticala.Are careva vreo idee?Daca da imi puteti lasa codul sau vreun site de pe care as putea lua un exemplu.Apropo as putea folosi "style" pe acesta dupa?

Justiceman2 · Posted: 08-04-2016, 17:46:41 | Translate post to: ... (Click for more languages)

<head>
<style>
div.vertical-line{
width: 1px;
background-color: black;
height: 100%;
float: left;
}
</style>
</head>

<div class="vertical-line" />

ai mai multe aici http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html

Geov · Posted: 08-04-2016, 18:24:57 | Translate post to: ... (Click for more languages)

Multumesc, merge . Dar ma poti ajuta sa o pun in html-ul meu:

//HTML

<div id="sidebar">
<hr class="rightsidebar">
<h3 id="h31">Sort By</h3>
...........
<h3 id="h32">Categories</h3>
...........
</hr>
</div>

//CSS:
hr.sidebarhr {
width: 1px;
background-color: black;
height: 100%;
float: right;
}

Spoiler:

Problema e ca mi-o pune orizontala.

Justiceman2 · Posted: 08-04-2016, 19:59:25 | Translate post to: ... (Click for more languages)

cam ce ai vrea sa faci cu liniile ? sa pui ca un chenar la Sort By si Categories ?

daca am inteles bine tie tiar tr cv de genu

Spoiler:

Geov · Posted: 08-04-2016, 20:22:44 | Translate post to: ... (Click for more languages)

Nu chiar...
Initial as vrea ceva gen:

Spoiler:

- cu culoare alba probabil

la care sa adaug efectul nr. 18 de pe siteul:

Spoiler:

Eu n-am mai pus ce am mai scris la sort by si categories sa nu te induc in eroare .

mayavin · Posted: 08-04-2016, 23:28:29 | Translate post to: ... (Click for more languages)

Cum ai facut linia albă orizontala care exista deja?
Pune codul complet de HTML si CSS pentru casuta aia din stanga unde ai Sort By si Categories and we will work from there.
Offtopic: de unde faci tutoriale?

Geov · Posted: 09-04-2016, 10:04:11 | Translate post to: ... (Click for more languages)

<div id="sidebar">
<hr class="rightsidebar">
<h3 id="h31">Sort By <img id="changer1" src="img/linie.jpg" alt="kek" width="11" height="11" onclick = "aici n-are treaba vine script" /></h3>
<ul id="sidebarul">
<li class="sidebarli"><a href="#">Newest</a></li>
<br>
<li class="sidebarli"><a href="#">What<i><font size="+1" face="Times New Roman">'</font></i>s Hot</a></li>
<br>
<li class="sidebarli"><a href="#">Most Rated</a></li>
<br>
<li class="sidebarli">Popular last<img id="changer2" src="img/linie.jpg" alt="kek" width="10" height="10" onclick = "aici n-are treaba vine script" />
<ul id="popularul">
<li class="popularli"><a href = "#">hour</a></li>
<li class="popularli"><a href = "#">3 hours</a></li>
<li class="popularli"><a href = "#">8 hours</a></li>
<li class="popularli"><a href = "#">12 hours</a></li>
<li class="popularli"><a href = "#">24 hours</a></li>
</ul>
</ul>
<h3 id="h32">Categories<img id="changer3" src="img/linie.jpg" width="10" height="10" onclick = "script again"/></h3>
<ul id="categul">
<li class="categli"><a href ="#">Abstract</a></li>
<li class="categli"><a href ="#">Animals</a></li>
<li class="categli"><a href ="#">Creativity</a></li>
<li class="categli"><a href ="#">Fantastic</a></li>
<li class="categli"><a href ="#">Melancholy <font size="+1" face="Times New Roman">&</font> Sadness</a></li>
<li class="categli"><a href ="#">Nature</a></li>
<li class="categli"><a href ="#">Personajes</a></li>
<li class="categli"><a href ="#">PS Manipulation</a></li>
</ul>
</hr> - daca ii adaug codul de vertical arata aiurea tare..
</div>

Nu am nimic pentru hr [ rightsidebar ] in css pentru ca imi arata 1 cm cu codul tau:
width: 1px;
background-color: black;
height: 100%;
float: right; - dar daca il pun in alta pagina unde nu e nimic scris merge perfect. Incearca cu position absolute si ar avea o tentativa sa mearga sa zic asa dar mi se duce in stanga chiar daca am pus float right.

restu tine de aspect soo css.

#sidebar{
margin-top:100px;
background-color:#8B0000;
width: 270px;
height: 100%;
float:left;
left:0;
margin-left:0px;
position: relative;
}

#h31{
color:#ffffff;
font-family: Duty Cycle;
margin-top:25px;
margin-left:25px;
}

#sidebarul{
color:#ffffff;
font-family: Duty Cycle;
list-style-type: none;
margin-top: 0px;
margin-left:0px;
}

.sidebarli{
padding-top:0px;
margin:0px;
}

.sidebarli a,li{
text-decoration: none;
font-size: 20px;
font-family: Duty Cycle;
color:#ffffff;
padding-top: 0px;
}

#popularul{
list-style-type: none;
}

#popularul a{
color:#ffffff;
}

#h32{
color:#ffffff;
font-family: Duty Cycle;
margin-top:25px;
margin-left:15px;
}

#categul{
list-style-type: none;
color:#ffffff;
font-family: Duty Cycle;
margin-top: 10px;
}

.categli a{
color:#ffffff;
text-decoration: none;
}

Am facut un timp tutoriale la Envavo Tuts la sfatul cuiva si am invatat putin cum sta treaba cu div, id, classes, float position si sa folosesc css.Restu am invatat singur lucrand, mai cautam pe stackoverflow sau alte siteuri...Etc. Totusi m-a ajutat mult acest start nici nu stiam de &nbsp

.Si in timp am invatat ceva..

mayavin · Posted: 09-04-2016, 11:56:29 | Translate post to: ... (Click for more languages)

Bara apare datorita <hr class="rightsidebar" > (hr vine de la horizontal rule)
<hr> este self-closing, deci nu trebuie sa-l inchizi. E suficient sa pui fix dupa <div id="sidebar">

Code:

Inainte sa faci ceva, verifica sa ai inchise toate tagurile din div-ul cu id="sidebar", adica sa inchizi toate <ul-urile> si ce mai ai tu pe acolo. Div-ul care are tot continutul tau (adica cel cu id="sidebar") pune-l intr-un alt div cu ce nume vrei tau, caruia ii dai din css float: left).
Apoi inainte sa inchizi div-ul nou creat mai faci un div de exemplu <div id="baraverticala"></div>. Caruia ii dai din css un style de genul:

Code:

width: 1px;
height: 100%;
background-color: white;
float: left;
position: relative;
right: 10px;
top: 100px;

Geov · Posted: 09-04-2016, 13:45:36 | Translate post to: ... (Click for more languages)

Nu mai conteaza am alta idee.Multumesc la toti pentru sfaturi.
T/C.