Прост CSS

[DirectX]

Някой може ли да ми направи един прост CSS от вида на :

-------|---------------------------------
|
|
|

ей така като 2 пресечени линии

 

[adrian]

Аз поне не разбрах какво искаш

 

[DirectX]

малко не се е получило в примера ;д

значи искам представи си координатна система (х;у), обаче вертикалната линия (у) е изместена на ляво да се получи като разместен кръст ;д така разбра ли ме ? :д

 

[php_css]

значи нарисувай го на paint качи го в лична папка и дай линк да се разбере какво искаш защото и аз не разбрах

 

[DirectX]

ето такова нещо

 

[adrian]

#x {
border-bottom: 1px solid black;
height: 100px;
margin-bottom: 100px;
position: relative;
width: 200px;
}

#y {
background: black;
height: 200px;
left: 50px;
position: absolute;
width: 1px;
}

<div id="x">
<div id="y"></div>
</div>

Може и да има друг по-добър начин, просто сега това ми хрумна.
margin-bottom: 100px; е разликата от height: 200px; - height: 100px; защото иначе следващите елементи ще ти започват точно под линията, а не както трябва под координатната система.

ДЕМО

 

[DirectX]

Дам видях го адриане, обаче май трябваше да се доизкажа напълно, за какво ми трябваше Значи да може над и под хоризонталната линия да се добавя текст, а както е в момента не може да стане, пък ти си го направил както го обясних в предния пост, но виж на снимката, че искам да е по-нагоре хоризонталата

 

[adrian]

Както съм го направил ти дава такава свобода, че направо не можеш да си представиш.

Искаш линията да е по-нагоре (ами тогава просто намали height на #x), искаш отдолу да може да се слага текст (тогава махни margin-bottom) и всичко, което сложиш веднага под

<div id="x"><div id="y"></div></div> ще застава под чератата, но аз лично бих оставил margin-bottom и бих направил още един див, който да се намира в <div id="x"></div>, позоционираш го пак абсолютно и го местиш където искаш.
За текста над чертата по същия начин.

 

[DirectX]

... но аз лично бих оставил margin-bottom и бих направил още един див, който да се намира в <div id="x"></div>, позоционираш го пак абсолютно и го местиш където искаш.
За текста над чертата по същия начин.

за горното забрах се как си го направи и е супер
обаче за това не успях да те разбера как ще стане

ако може ми дай едно примерче нагледно и те оставям :Д

 

[adrian]

#x {
border-bottom: 1px solid black;
height: 100px;
margin-bottom: 100px;
position: relative;
width: 200px;
}

#y {
background: black;
height: 200px;
left: 100px;
position: absolute;
width: 1px;
}

#over { position: absolute; left: 60px; }
#under { position: absolute; bottom: -20px; right: 0; }

<div id="x">
<div id="y"></div>
<div id="over">Y axis</div>
<div id="under">X axis</div>
</div>

Общо взето можеш да си позоционираш колкото искаш дивове в този.

Демо

 

[DirectX]

#x {
border-bottom: 1px solid black;
height: 100px;
margin-bottom: 100px;
position: relative;
width: 200px;
}

#y {
background: black;
height: 200px;
left: 100px;
position: absolute;
width: 1px;
}

#over { position: absolute; left: 60px; }
#under { position: absolute; bottom: -20px; right: 0; }

<div id="x">
<div id="y"></div>
<div id="over">Y axis</div>
<div id="under">X axis</div>
</div>

Общо взето можеш да си позоционираш колкото искаш дивове в този.

Демо

Благодарско ! <3