Позициониране

dakata__92 · 13 Ноември 2014

Имам един main tag и в него article и aside, които искам да се позиционират правилно но не се справям. желая да позиционирам асайд тага от дясно и до него да редя х на брой артикълчета. Как да го направя с долният код.

HTML:

<main id="main">
		<article class="article">
		</article>
		<aside class="aside">
		</aside>
</main>

[css]
#main{
/* display: block; - IE*/
display: block;
margin: 0px 60px 0px 60px;
height: 100%;
box-shadow: 0px 0px 15px 0px rgba(48, 69, 50, 0.4);
background-color: #FFF;
}
.article{
float: left;
width: 79%;
min-height: 100px;
border: 1px solid #808080;
}
.aside{
float: right;
width: 20%;
height: 100%;
border: 1px solid #808080;
}[/css]

anonimen · 13 Ноември 2014

Врапни articles в един див "float: left", aside-a "float:letf". Aко ти се прецаква заради border-и можеш да използваш

Код:

box-sizing:border-box

ДЕМО: http://jsfiddle.net/e1f3w3oq/

dakata__92 · 14 Ноември 2014

anonimen каза:
Врапни articles в един див "float: left", aside-a "float:letf". Aко ти се прецаква заради border-и можеш да използваш

Код:

box-sizing:border-box

ДЕМО: http://jsfiddle.net/e1f3w3oq/

Принципно да така става но при мояд код съм насмел много нещата. Основният проблем идва от факта, че не указвам правилно нещата в самият CSS и не им знам големината в пиксели... Ето какво имам предвид:

http://gohtml.hit.bg/ - не е реклама, а демо.

Може, ли да ми обясниш къде греша, защото от толкова кодване и четене направо изтерясах? Един казва, че точно така трябва да го направя друг, че изобщо не е правилно...

anonimen · 14 Ноември 2014

dakata__92 каза:
Може, ли да ми обясниш къде греша, защото от толкова кодване и четене направо изтерясах? Един казва, че точно така трябва да го направя друг, че изобщо не е правилно...

Поиграх си с chrome-конзолата и установих, че задаваш точна ширина на .leftMain - 900px, но на aside-a също му задаваш точна ширина - 300px. Което значи main#main трябва да е широк поне 900+300=1200px, за да изглежда правилно (да са едно до друго leftmain и aside, в противен случай застават едно под друго). Дотук при мен изглежда нормално (main-a ми излиза 1207px, тоест се побират двете). Но! си сложил на aside-a един margin-right от 10px, който разширява main-a до 1210px, но понеже main-a е max 1207px (при мен), се налага aside-a да отиде отдолу. При по-висока резолюция ще изглежда нормално.
Тоест ако задаваш точни пиксели винаги ще има разместване на елементите при намаляване на резолюцията. Затова може да използваш % или Bootstrap

dakata__92 · 14 Ноември 2014

Знали да пренапиша CSS-а с проценти, така ли да го разбирам. Ето обновено демо. http://gohtml.hit.bg/index.html
Защо главният #main не се разтяга да поеме съдържанието в себе си?

anonimen · 14 Ноември 2014

dakata__92 каза:
Знали да пренапиша CSS-а с проценти, така ли да го разбирам. Ето обновено демо. http://gohtml.hit.bg/index.html
Защо главният #main не се разтяга да поеме съдържанието в себе си?

Защото aside има 10px десен margin

+ си задал на main margin:4%, което допълнително го смалява.

И така, leftmain - width:75%, aside - wdith:24% + 10px margin-right. Следователно общата им дължина е 99% + 10px. За да се допълнят до 100%, тези 10px трябва да са <= 1%. Защо просто не махнеш margin-right-a?

swlight · 14 Ноември 2014

Защо просто не ползваш Bootstrap ? Лесно, респонсив и правилно. Това се прави точно с 5 реда код там и е и респонсив.

Иначе до колкото аз знам използването на тези много проценти за позициониране не е много добър начин.

Успех!

dakata__92 · 14 Ноември 2014

swlight каза:
Защо просто не ползваш Bootstrap ? Лесно, респонсив и правилно. Това се прави точно с 5 реда код там и е и респонсив.

Иначе до колкото аз знам използването на тези много проценти за позициониране не е много добър начин.

Успех!

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

dakata__92 · 14 Ноември 2014

anonimen каза:
dakata__92 каза:

Знали да пренапиша CSS-а с проценти, така ли да го разбирам. Ето обновено демо. http://gohtml.hit.bg/index.html
Защо главният #main не се разтяга да поеме съдържанието в себе си?

Увеличете...

Защото aside има 10px десен margin
+ си задал на main margin:4%, което допълнително го смалява.

И така, leftmain - width:75%, aside - wdith:24% + 10px margin-right. Следователно общата им дължина е 99% + 10px. За да се допълнят до 100%, тези 10px трябва да са <= 1%. Защо просто не махнеш margin-right-a?

Ок, но сега по height защо не се разтяга контейнера?

swlight · 14 Ноември 2014

Добре.

Ако article е за единична новина или там за каквото го използваш направи това. обгръщаш самите неща, които ще са от лявата страна в един клас, които трябва да бъде с float: left; а до него класа aside трябва да е с float:right. То така или иначе сложи ли се на articles float: left автоматично aside ще иде до него, просто няма да е позициониран в дясно. Успех!.

HTML:

<main id="main">
        <div class="articles">
		<article class="article">

		</article>
        </div>
	
	<aside class="aside">

	</aside>
</main>

anonimen · 14 Ноември 2014

swlight каза:
Добре.

Ако article е за единична новина или там за каквото го използваш направи това. обгръщаш самите неща, които ще са от лявата страна в един клас, които трябва да бъде с float: left; а до него класа aside трябва да е с float:right. То така или иначе сложи ли се на articles float: left автоматично aside ще иде до него, просто няма да е позициониран в дясно. Успех!.
.....

Точно това съм му казал да направи! Погледни първия ми пост. :evil: :evil:

Ок, но сега по height защо не се разтяга контейнера?

Задал си му височината (100%) да е колкото височината на парента (#main). За да направиш 2 float-нати дива да са с една и съща височина, погледни тук: http://stackoverflow.com/questions/16317497/make-floating-divs-the-same-height

dakata__92 · 14 Ноември 2014

anonimen каза:
swlight каза:

Добре.

Ако article е за единична новина или там за каквото го използваш направи това. обгръщаш самите неща, които ще са от лявата страна в един клас, които трябва да бъде с float: left; а до него класа aside трябва да е с float:right. То така или иначе сложи ли се на articles float: left автоматично aside ще иде до него, просто няма да е позициониран в дясно. Успех!.
.....

Увеличете...

Точно това съм му казал да направи! Погледни първия ми пост. :evil: :evil:

Ок, но сега по height защо не се разтяга контейнера?

Увеличете...

Задал си му височината (100%) да е колкото височината на парента (#main). За да направиш 2 float-нати дива да са с една и съща височина, погледни тук: http://stackoverflow.com/questions/16317497/make-floating-divs-the-same-height

Извинявай, не успях да се ориентирам...

anonimen · 14 Ноември 2014

В момента трябва да направиш aside и .leftMain с еднакви дължини, нали?
Ето кода в приетия отговор във въпроса в stackoverflow:
[css]#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}

#left {
display: table-cell;
width: 50px;
background: blue;
}

#right {
display: table-cell;
width: 250px;
background: red;
}
[/css]Трябва просто да замениш #left и $right съответно с .leftMain и aside, #wrapper-a ти е #main. width и background са сложени за пример, трябва да си копираш display-овете на съответните места в твоя css.

dakata__92 · 14 Ноември 2014

Нещо май не ме разбра. Виж демото http://gohtml.hit.bg/index.html и скролни надолу до дъното за да ти се изясни проблема. Height на .leftMain ми е проблема

anonimen · 14 Ноември 2014

dakata__92 каза:
Нещо май не ме разбра. Виж демото http://gohtml.hit.bg/index.html и скролни надолу до дъното за да ти се изясни проблема. Height на .leftMain ми е проблема

Aaaa, да, не съм разбрал. Еми махни тва height:100%, което си го сложил на main-a и ето тук е показано как да оправиш неивидимия парент на флоатнати дивове:
http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing
[css]main:after {
content: " ";
display: block;
height: 0;
clear: both;
}[/css]
(пробвах го през конзолата и изглежда както трябва)

dakata__92 · 14 Ноември 2014

Така ми изчeзва aside от дясната страна. Защо изобщо се налага да се използва after и тези шашми?

anonimen · 14 Ноември 2014

dakata__92 каза:
Така ми изчeзва aside от дясната страна. Защо изобщо се налага да се използва after и тези шашми?

Изчезва, защото не си му задал височина (използвал си height:100%, което в случая не работи). Когато го напълниш със съдържание, ще се появи.
А за after-a - това е начина да избегнеш нулевата височина, когато в някой див имаш други float-нати дивове.

Едит: просто сложи 2-3 думи в aside-а и ще видиш, че не е изезнал, просто има нулева височина.

anonimen · 14 Ноември 2014

Ок, може би не си ме разбрал правилно. Ще се опитам да обясня кое откъде идва и какво се случва. Първо махаме всички места, където има height:100%.

Искаме n-броя дивове да стоят отляво, а друг див - отдясно. За целта вкарваме дивовете отляво в друг див. Сега имаме два дива, които искаме да застанат един до друг (и се намират в друг див - #main).
Затова използваме float:left. Добре, те застават както искаме, но тогава #main се свива.

Този проблем се оправя като сложим още един (празен) див в #main с clear:both. Тоест имаме някакви дивове float:left и след тях слагаме един див clear:both. Тъй като ни мързи да правим още един див (може би си го срещал в Bootstrap като .clearFix), използваме css-селектора :after, който симулира създаването на още един див. Въпросният един див му слагаме clear:both и проблемът е решен.

huanitomuerte · 25 Ноември 2014

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	width: auto
}

#main {
	margin: 2%;
	padding: 2%;
	background: #ccc
}

section,
aside.aside {
	display: inline-block;
	height: 600px
}

section {
	background: #FF0000;
	width: 67%;
}

aside {
	background: #0000FF;
	width: 30%;
	float: right
}

#main article.article {
	display: block;
	min-height: 170px;
	margin: 10px;
	background: #33FF00
}
 @media screen and (max-width: 1024px) {

section,
 aside.aside {
	float: none !important;
	width: 100%;
	margin: 0;
}
}
</style>
</head>

<body>
<div id="main">
  <section>
    <article class="article"></article>
    <article class="article"></article>
    <article class="article"></article>
  </section>
  <aside class="aside"></aside>
</div>
</body>
</html>

Позициониране

dakata__92

Super Moderator

anonimen

Super Moderator

dakata__92

Super Moderator

anonimen

Super Moderator

dakata__92

Super Moderator

anonimen

Super Moderator

swlight

Registered

dakata__92

Super Moderator

dakata__92

Super Moderator

swlight

Registered

anonimen

Super Moderator

dakata__92

Super Moderator

anonimen

Super Moderator

dakata__92

Super Moderator

anonimen

Super Moderator

dakata__92

Super Moderator

anonimen

Super Moderator

anonimen

Super Moderator

huanitomuerte

Registered