[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
HTML+CSS
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /wsr/ - Worksafe Requests

Thread replies: 24
Thread images: 1
File: screen of html and css.png (1 MB, 2560x1440) Image search: [Google]
screen of html and css.png
1 MB, 2560x1440
Need help from programmers, I am scrub tier learner and need help with my CSS.
How can I get it so have have 3 divs spread across the page, 2 on the left and right with 480px width, and 1 in the centre with 960px width?
>>
>>44422
Several ways.

Assuming you want your shit to be all relative instead of absolute, you can have the three divs inside of another one with width: 1920px, and then have all 3 of the divs inside with float: left.

Or, if you don't care for it to be relative and are fine with the divs being absolute, well, you can just set their top, left and right properties accordingly.

And go read... let's see... HTML, XHTML and CSS All-In-One For Dummies.
>>
>>44430
I'm on a course lol but teacher thrown us in at deep end..
So like what do absolute and relative do?
>>
>>44435
http://www.w3schools.com/css/css_positioning.asp
>>
>>44435
>>44440
Oh, and by the way, absolute positioning shouldn't be abused unless you know exactly what you're doing, because absolute elements are outside wrapping. Which means that, for example, if you have an absolute div inside a div with a border, the border of the parent div won't contain the absolute div.
>>
>>44444
From reading the linked page, I'd assume im best off going the relative route and having the box on the left
left-box {
position: relative;
left: 0px;
background-color: #fff;
}
>>
>>44444
Oh and obviously put the width I want in as well, like 480px for the left one
>>
>>44454
>>44450
Not exactly. Relative positioning means it's going where it should, flowing relatively to the other relative divs. So doing left: 0px is redundant in relative positioning.

For the relative route, assume 4 divs: container, left, center and right.

<div id="container">

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

</div><!-- #container -->

So your css would be like this:
#container {
width: 1920px;
}
#left {
width: 480px;
float: left;
}
#center {
width: 960px;
float: left;
}
#right {
width: 480px;
float: left;
}

This, of course, could be made more efficient by adding the same class to the 3 inner divs, so you can set their float:left in a single line. Same with other things that might have to be set, like display block and whatnot.
>>
>>44462
Okay I get you, cheers for the help, and like the length of each section will depend on what I put in right? (Dumb question I know)
>>
>>44465
What do you mean "length"?

I'm assuming you mean height? Yeah, the height depends on its contents (and the padding property), unless you actually define the height property. Same with width.
>>
>>44471
Yeah I meant height lol..
But thanks senpai, youve been a great help :)
>>
>>44481
np.

And seriously, torrent that dummies book. You need it.
>>
>>44483
I will, are there any good books on Java as well?
>>
>>44484
Java a shit.

Seriously, don't program java. It's the cancer killing FOSS via lots and lots of bloat.

But if you - need - to learn it, then just get a java dummies book too.

Though if you - need - to learn it because you wanna program for android, just learn python and kivy instead.
>>
>>44486
Well I was either gonna learn Java or C++ for object oriented, but if you advise against Java, I'll go elsewhere, and can you explain python? Like I've heard of it but don't know much about it?

And I was gonna learn C# for android.
>>
>>44488
Python is pretty much pseudocode that can be interpreted, and it's got thousands of extremely powerful libraries.

Give it a go. Try Python Programming for the Absolute Beginner. It covers OOP too.

And the best part is, what you learn in python, you can apply in more complex languages, like C++.
>>
>>44489
For python would you recommend a book or codeacademy?
>>
>>44491
Again, Python Programming for the Absolute Beginner.
>>
>>44493
Oh.. Yeah I will lol, does it give you an IDE you can use? I have visual studio 2015 but I'm not sure you if you can code python in it?
>>
>>44496
>IDE
Kids these days.

You actually program your GUI in python - you get to choose the library too (I use kivy, but IIRC, Python Programming for the Absolute Beginner teaches tkinter).

The installer does come with an editor though: IDLE. But I use geany. For a windows user... it's kinda like Notepad++, but better.
>>
>>44498
What's the difference between kivy and tkinter?
>>
>>44500
kivy runs on mobile and tkinter doesn't. Also, the way they look and whatnot.

But the basics (building a cycle, refreshing, waiting for actions, etc) are pretty much the same.
>>
>>44505
Anyway thanks dude for the help, imma torrent the book in the morning and start learning python, and thanks for the CSS/HTML stuff.
>>
>>44506
Yeah, np. And do get the all-in-one web dummies book too. It's a pretty good introduction to the shit you're learning, and will most likely teach you more than school.
Thread replies: 24
Thread images: 1

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.