HTML/CSS - Creating 2 Column-Layout

03/09/2015 17:45 C_O_R_E#1

Hey guys,

presently, I'm looking through my code to find out my mistake in this column-Layout. All I want to do is, create a column-Layout, which is also working perfectly when I'm creating a new document. But I'm a bit inquisitive, 'cause I want to know where my mistake is hidden in currently document.

Could someone help me out? I just got the "tunnel" view and incompetent to find my own mistake right now.

Spoiler

CSS-File

Spoiler

03/09/2015 18:36 Luuc'#2

Wenn ich es jetzt richtig verstehe :D
Du k�nntest die Artikel in einen erneuten div "einschlie�en":

HTML Code:

<div class="content">
<article id="main">
    	<h2> Das Fahren mit den Cable Cars </h2>	
    		<p>San Francisco geh�rt zu den aufregendsten St�dten auf unserem Planeten. 		               Bayside informiert Sie �ber alles, was diese pulsierende Metropole bietet:               hervorragende Sehensw�rdigkeiten, Restaurants und Unterkunft f�r jeden               Geschmack und Geldbeutel sowie viele interessante Veranstaltungen </p>			              
    </article>
              
    <aside id="sidebar">
    	<h2> Cable Car Tips </h2>
        <p>San Francisco geh�rt zu den aufregendsten St�dten auf unserem Planeten. 		               Bayside informiert Sie �ber alles, was diese pulsierende Metropole bietet:               hervorragende Sehensw�rdigkeiten, Restaurants und Unterkunft f�r jeden               Geschmack und Geldbeutel sowie viele interessante Veranstaltungen </p>
    </aside>
</div>

dann k�nntest du das in CSS wiefolgt machen:

Code:

/* CSS Document */
.content {
    display: inline;
}

.content .main {
    float: left;
}

.content .sidebar {
    float: right;
}

Bin mir jetzt nicht richtig sicher ob das das ist, was du willst, habe es au�erdem nicht getestet aber einfach mal ausprobieren! :)

03/09/2015 19:06 C_O_R_E#3

I reconstruate my website layout with Paint.

[Only registered and activated users can see links. Click Here To Register...]

Red/blue area refers to main-container and sidebar-container.

I could fix it just like you did, but its not necessary to create a new container for it.
I want to know, why is it not working, what mistakes/thoughts are false here?

I mean, when I create a new document with just:

HTML Code:

<article ="main">

</article>

and

<aside ="sidebar">

</aside>

and also adding my css script to it, it works. Im just asking myself, why is it not working on these documents above, what is wrong?

But anyway, thanks alot for your response !

03/09/2015 20:46 Luuc'#4

Quote:
Originally Posted by C_O_R_E
I mean, when I create a new document with just:
HTML Code:
<article ="main">

</article>

and

<aside ="sidebar">

</aside>
and also adding my css script to it, it works. Im just asking myself, why is it not working on these documents, what is wrong?

But anyway, thanks alot for your response !

If it works like you said, where's the problem?

03/09/2015 22:35 C_O_R_E#5

The problem - as you can see above - is not working for the whole html document. It means, when I create a html document without wrapper-container, hero-container, footer etc. it works fine. But at the point, when im trying to implement it into my html structure it does not work out.
I'm missing something here and to be honest, I can see it at all.
Your solution to build around these containers an out-container (separate one) works - just like I did, before even asking on epvp. All in all its not a professional and common solution. I want to find/see the solution which is not based on a separate created container, 'cause it should be work with these containers without creating an extra container one.

German:

Wenn ich ein neues HTML Dokument anlege, es lediglich mit article id="spalteeins" und aside id="spaltezwei" konstruiere, funktioniert es.
Beide Container bilden somit Spalten und das Ergebnis ist ein 2-Spalten Layout.
Sobald ich es aber auf das HTML Dokument - siehe Thread - anwende, �ndert sich nichts. Die zweite Spalte ist weiterhin unter der ersten Spalte.

Edit: // As I said it before, it's just a mistake which I scan and skim the code and didn't see my mistake.
After I took some rest I directly saw my mistake here.

Code:

#sidebar {
width: 35%;
margin-right: 2%;
[COLOR="Red"]float: right;[/COLOR]

}

03/09/2015 22:46 Luuc'#6

Warum sollte es nicht professionell sein? ^^ Wie man so sch�n sagt "Viele Wege f�hren nach Rom". Dort wird der eine ja wohl gleich gut sein wie der andere...

03/09/2015 22:53 C_O_R_E#7

Ich habe vergessen - nachtr�glich editiert - bei der zweiten Spalten zu floaten.
Da ich jahrelang in ASM und C++ programmiere (deshalb mag ich kompakte, kleinere Quellcodes und will den k�rzesten Weg nach Rom :) )
und ich Beschreibungssprachen wie HTML aus dem Weg gehe, zwinge ich mich hin und wieder einiges zu wiederholen, um mich in dem Gebiet fit zu halten.

Trotzdem danke :)

03/10/2015 00:07 Adroxxx#8

Well, ... no offense, but why in seven hells don't you use a grid?
It's 100% cleaner. Because what you're doing now is very unclean.

First you using semantic html tags, but then using id. But why? There is no need to use fix ids. Its so 1999.

Quick grid example:

[Only registered and activated users can see links. Click Here To Register...]

Its so much cleaner, because you can style your page with things like rows and columns and it's a good start for responsiveness.

And you can reuse it for several different pages and easy change layouts, without rewritting everything.

Imagine on your 2nd page you want to change some layout or make more compley layouts. You will have to rewrite your id stuff.

03/10/2015 07:28 Luuc'#9

Na wenns jetzt geht ist ja alles gut ^^

03/10/2015 18:44 C_O_R_E#10

Quote:

Well, ... no offense, but why in seven hells don't you use a grid?

I definetly allow criticism, no matter the way you lay open your critic.

Quote:

First you using semantic html tags, but then using id.

To be honest, I clearly don't know the difference between semantic and non-semantiv html tags. Sorry. I didn't research well, which leads me to this pathetic code ( from a web developer point of view :/ ).

Quote:

Its so much cleaner, because you can style your page with things like rows and columns and it's a good start for responsiveness.]

Give me some time to read in the new stuff :)

Thank you too, for your response.

@Luuc'

I already know it, but nice to keep responding to help me out.

03/10/2015 18:59 Luuc'#11

Semantic: article, aside, ...
Non-Semantic: div, ...

03/10/2015 19:29 Adroxxx#12

Quote:

Originally Posted by C_O_R_E

To be honest, I clearly don't know the difference between semantic and non-semantiv html tags. Sorry. I didn't research well, which leads me to this pathetic code ( from a web developer point of view :/ ).

Well in the pre-html5 time you had only a very restricted pool of hmtl tags.
So websites looked mostly like this:

PHP Code:


			
div.id="header"

div.id="nav"

div.id="content"

div.class="main"

and so on.

But with HTML5, you got a lot more semantic tags, that describe the content of it.

Like

PHP Code:


			
<nav> <header> <article> <figure

and more.
So that are semantic tags. And there is no need to set an id for every tag you are using.

If it's something unique like the nav or header tag you can simply style the whole tag.

Well grids are no magic.
The idea is, that you have fix columns with a specific width, where you place the content. The width is in modern grids mostly percentage based. So the site get's responsive.

You can read up here a few basics
[Only registered and activated users can see links. Click Here To Register...]

You can build your own grid, use generators or use some grids off the internet.

Or you can use frameworks like bootstrap or foundation.
They will give you a grid and a lot of ready to use elements, that are all styled.

To understand girds better, they just give you some helper classes that define colums.
So *attention a bad example incoming*

imagine the following, this is a simple 4 column grid:

PHP Code:


			
CSS:



body { width:100% }

container {width: 1900px}



column-1-4 {width: 475px; }

column-1-2 {width: 950px; }

column-2-3 {width: 633px; }

So now you have 4 columns which you can style your page.
You can make 4 x the column-1-4 which is the smallest.

So you would get 4 small columns in a row.

Or you can make 1 x column-1-2 and 2 x column-1-4

so you have 1 column for the content which is 1/2 of the whole width of the window and 2 smaller columns which have 1/4 of the width.

03/11/2015 11:07 C_O_R_E#13

[Only registered and activated users can see links. Click Here To Register...]

I "tasted" the grid system and seems more comfortable for me.
Still some problems/misunderstandings, which I will fix in the following days. I can't spend more time on programming stuff , cause I have to prepare myself for my final exam at school.

Anyway, nice for your support. I will edit my post, when I made some progress.

Spoiler

03/11/2015 12:48 Luuc'#14

Never done a grid system (except for the bootstrap columns). Maybe I should try it too...

03/11/2015 17:50 Adroxxx#15

Well you should add a css reset,
and don't simply use the dirty grid system I've posted.

Normally you also have padding and margins for the containers.
So it looks better.

You can take a look into
[Only registered and activated users can see links. Click Here To Register...]

or simply the bootstrap grid, which is also fine.