« first day (102 days earlier)      last day (509 days later) » 

01:06
anyone here?
Hi
Please post the code that you are having trouble with
<div class="style1" style="display:inline-block;position:absolute;height:100%;left:360px;width:65px"><a href="login" class="link-style2 signin"><b><font face="Corbel" size="4" style="vertical-align:middle" color="White"><center>Login</center></font></b></a></div>
vertical-align:middle doesn't work
it keeps the "Login" text at top
height: 100% doesn't work on css, because a page can scroll up and down and is technically infinite
Please star that message if I helped you
doesn't help
i did height:37px
still it is at top
??
one second
I am programming it out
01:18
ok
Here you are jsfiddle.net/qpdje
again, please star if you will
uhm
that is browser fancy-ness but not real CSS folks
it's actually simple.
give the outer div a line-height: of the height: you'd like to have.
job done.
vertical-align: often does not work for inline or block elements.
thats why I changed the display to table-cell
yeah, but you then have table-data display
yeah
01:27
that's the pattern.
the line-height is a tweak that works with very old browsers as well.
see the updated example: jsfiddle.net/qpdje/1
2
the element you want to position (a) has the alignment, not the parent element (div)
that's what the css property is for.
;)
wow. cool
star for star? :P
@blake305 height: 100% does work on css. it's always relative to the parent element.
I know, but there was no parent element
there always is the <html> parent element, most often even <body> (body is not in case you want to style body)
see this example, schernikau.net/blog
you can size the browser windows height (the middle area is aligned to bottom), while you maintain scrolling for the content part.
@blake305 the jsfidle with 100% height: jsfiddle.net/qpdje/3
01:54
so the line height example worked, thanks a lot to both of you
I appreciate your help a lot. Thank!
Thank!
Thanks! *
 
3 hours later…
04:54
anyone here?
hi
you there?
<div id="First">
jhgj
</div>
<div id="Second">
<div id="container"></div>
</div>
<div id="Third">
</div>
<div style="clear:both;border: 1px solid #eee;margin-top:-40px;text-align:center;border-bottom-color:white"><font color="#556782">Last box</font></div>
in that code, it prints the three div's side by side and then prints the last box on a new line under the three divs
@user1079641 What are you attempting to do?
the problem is that there is a gap between the last box and the three divs
Are you seriously using the font tag?
04:59
| | |
-------------
________
the ------ means the space between the top divs and the bottom div
That thing got deprecated ages ago.
yes, for now i am, i will change this all later, i am testing something right now
Do you have a doctype declared?
yes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
can you put your whole html/css up on a pastebin and link me?
05:01
@CharlesSprayberry, I am trying to put three divs next to each other and one div under those three divs
the problem is that there is a space that keeps coming in between the three divs and the bottom div
I repeat that I need your whole code.
I will leave this one to @LeviMorrison. He is surely a better man than I.
well the rest of the code is completely irrelevant
@user1079641 I doubt it.
because it creates another box at the top
05:04
I work as a front-end developer. Trust me. I need all of your HTML and CSS.
ok wait a second
here it is
u there?
What browser are you using?
chrome/ie/firefox
well i am testing the site in each browser
What is the overall goal? Right now it just looks messed up.
well there have been somethings removed but overall, the goal is to create four divs
three side by side
and one at the bottom
so like this:
| | |

___________
consider the | a div
so three divs next to each other
then consider _____ a div
so that is the fourth div
05:14
You want a three column layout with a footer?
yupp
but right now, it shows a little space between that footer and the three divs
ok
i just tested the code i sent you
and it looks messed up right now
you there?
go over here:
you can see the space there
Hmm. I see it.
i need to fix it
I need your whole code.
Honestly, without it I cannot help you.
wait a min
05:30
Also, is there any reason you aren't using html5?
because not all browsers support html5
users might run ie6,7,or 8
and i know for sure that ie 6 and 7 don't support html5
wellhttp://pastebin.com/trmcjtcd
that code works, see it
Okay, let me teach you something. If you do not know your target audience, there is not much point of doing ANYTHING at all.
Do you know that your users DO run IE6?
yes
again
i said this earlier
this is just a test site
a lot will be changed later
like replace font tags
and all that
for right now, i just need this to work
You want a three column layout. Okay. What other requirements do you need?
just that three column with a footer underneath
as you can see in the code
the footer has a border on the top
ONLY
so it appears
________________
Test
i know you are triyng to help me
but could you please tell a little faster as i need to go
just do as much as you can
edited
It builds a very robust 3 column layout
ok
thanks
bye
Hi guys!
@WebDesigner hi
05:55
I'm just curious if there's a reason that people (like http://border-radius.com) use all of this heavy-weight code:

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 3px;
border-top-right-radius: 8px;
border-bottom-right-radius: 7px;
In a sence, there is
@WebDesigner sorry, was afk
You mean
border-radius: 3px 8px 7px 6px;
-moz-border-radius: 3px 8px 7px 6px;
-webkit-border-radius: 3px 8px 7px 6px;
right? without the top-right?
@Web_Designer how old are you?
just for interest:)
If I'm not mistaken, then the shorthand notation I showed has the same result as the first method. Right?
@blake305 BTW Believe it or not, I'm fifteen :)
I got my first professional web design project when I was 14.
@Web_Designer lol.. too late
@WebDesigner I'm 14, and I was't the one who asked :) lol I got mine at 13 :P
06:07
I started programming when i was 7
That's right. Generated text is easiest with the long way.
first job - when I was 10
@Web_Designer Do you know some hardcore programming lang?
Smth like C/C++/PHP ..?
No, but I definitely enjoy the world of modern web design complete with HTML5 and CSS3! :)
You have good future
but let it a go
I know PHP, CSS3, HTML5, javascript, you know the basics
06:10
I mean learn some really usefull lang
and objective-c (or at least intermediate)
If someone wants to work together
I'm looking for volunteers
for big projects
really big
like what
Like web based examination platform
I tried PHP once, in fact I built munchpost.com with what little PHP I knew.
06:11
@Web_Designer Don't show it anywhere else
I build helpmejailbreak.com but didn't renew it :P
Big elaborate php site
@blake305 doesn't work
now I realize I'd rather stick with the DESIGN part of webdesign. CSS intrigues me more than PHP i'd say.
I said I didn't renew it
So guys, If someone really wants work, my skype: tural.teyyuboglu I don't promise any profit, but after finishing some project, there will be. be sure
06:14
Let me upload the project to a new directory
I'm going to create virtual dev-house
uploading...
@WebDesigner @TuralTeyyuboglu blake305.com/helpmejailbreak check it out
@blake305 not bad
@TuralTeyyuboglu click on the pictures. very interactive
@blake305 Maybe you have intermadiate php, but you need to workout JS and Design skills
06:23
nahhh expert php
That was something I quickly put together
nothing serious lol
@blake305 do you have something serious?
yeah but they are for companies. private. wby?
of course have
spiderbuy.com
link?
lol
smiths-heimann.az
aquastyle.az
@blake305 ??
06:25
yes?
@blake305 why "lol"?
I asked for the link right after you gave it
yeah, we can work together sometimes in the future =)
06:26
what host do you use
@blake305 really?? I ssoooo happy)))) If someone really want to join my dev group, I can accept. I'm professional, and need at least the ones who really wants to be profi.
@blake305 my own servers
Woah self hosted?? o.O
@blake305 or gator vds
Can you handle lots of bandwidth? I have iPage
@blake305 I use my servers only for hi-end websites. For simple ones, hostgator
06:30
@TuralTeyyuboglu why is that? lets move this convo to skype. btilm305
ok add me. I posted skype
OK, I'll add you too...
 
15 hours later…
21:13
anyone here?
21:31
hi there
@user1079641 so what's burning?
give me a minute
html code here:
<div id="contentContainer">
<div id="links" class="column">
test
</div>
<div id="info" class="column">
<div id="info1"></div>
</div>
<div id="stats" class="column">
test
</div>
</div>
<div style="clear:both; border-top: 1px solid #eee;text-align:center"><font color="#556782">Test</font></div>
css code here
never mind
just one min
ok
here is the html:
<div id="contentContainer">
<div id="links" class="column">
jhgjh
</div>
<div id="news" class="column">
<div id="lastpost"></div>
</div>
<div id="userStats" class="column">
yutguy
</div>
</div>
<div style="clear:both; border-top: 1px solid #eee;text-align:center"><font color="#556782">Test</font></div>
and here is the css:
#contentContainer {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#contentContainer .column {
position: relative;
float: left;
}
#links {
width: 150px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#news {
height:100%;
background-color:red;
width: 100%;
border:0.12em solid rgb(229,229,229);
border-top:none;
border-bottom:none;
}
#userStats {
background:white;
border:1px solid black;
width: 234px; /* RC width */
margin-right: -234px; /* RC width */
and what do you want to know?
It is supposed to show a three column layout, but it isn't working
oh isn't working is quite broad.
there is space on left
then
21:40
so is this about columns or space?
the right div shows
columns
but the thing is
there are three divs
and they should be showing side by side and then a footer should be underneath
but it doesn't work
and in your own words, what did you do (simplified) to create the columns?
I mean with CSS, I see the three column divs.
right now
the middle and left divs aren't showing up right
I don't meant how it's displayed, but which methodology you used to create the columns with CSS.
float:left
21:44
okay, so you use the flow.
you know what the flow is?
could you give me a second
I think I almost got it working
I've given you a simple "the flow" example for any kind of column layout. The most important part is that every element that has a float: left; has as well a width. See here: jsfiddle.net/kqXPa
to come back to normal flow, use clear.
and that's basically it.
i have this
#news {
height:100%;
background-color:red;
width: 50%;
border:0.12em solid rgb(229,229,229);
border-top:none;
border-bottom:none;
float:left;
}
#userStats {
background:white;
border:1px solid black;
width: 25%; /* RC width */
float:left;
}
#contentContainer {
width:100%;
}
#links {
width: 25%; /* LC width */
float:left;
}
#news {
height:100%;
background-color:red;
width: 50%;
border:0.12em solid rgb(229,229,229);
border-top:none;
border-bottom:none;
float:left;
}
#userStats {
background:white;
border:1px solid black;
width: 25%; /* RC width */
float:left;
}
the contentContainer is the parent div to all these divs
but its not coming out right
it shows two of the divs on the same line
and then falls to new line for the last div
can you put your example into jsfiddle?
it's better to discuss then
I assume you're missing a clean clear.
Hi, It is ok to have a persantage as html class? for example: class="43%" . thanks
21:58
but it's hard to grab your little lengthy html / css example in chat only, so please put into a jsfiddle.
@aurel no, because a classname needs to start with a character, not decimal and % is not allowed as well.
thanks
@aurel I've been wrong.
Actually CSS does not limit that: w3.org/TR/CSS2/selector.html#class-html
And HTML allows pretty much in there: w3.org/TR/html4/struct/global.html#h-7.5.2
let me run a test.
@hakre I thought classes was ok with numbers (but was not sure of percentages) I know that ids do not allow to start with numbes
@aurel yeah, and I have not digged that up, but I'm pretty sure it's similar for class names. It does not work for 40% as a short test showed.
But I have not found the specs yet that clearly say what's allowed and what not.
can a div have a fixed width?
22:08
@aurel okay, it's clear in the CSS grammar: ident -?{nmstart}{nmchar}*
class
  : '.' IDENT
  ;
nmstart is a-z
so you can put a - at the beginning if you like gg
but no way % at the end or 0-9 at the beginning.
@user1079641 Sure, why not?
hi @Stifler
Thanks a lot
well
my div's width increased after i put a padding-left
which made it fall into a new line
width is always innermost, padding, border and margin adds to it, see Box Model
@user1079641 because of the float/flow
you want to freely change padding while having a column width?
yes
cause right now
the divs are side by side but the text starts all the way at the left making it look awkward
i need a little shift so i did padding-left:10px
but that make the third div fall onto next line
you can either pre-calculate that and substract the padding from the width
-or-
you put a div inside a div.
the outer div has the column width, the inner div get's the padding.
with outer/inner you can more fine-grainly control styles with CSS.
change stuff later on
work around browser bugs
you want to see an example?
22:16
well
could you show me an example for the first one
?
precalculate
sure, what is your padding CSS and what should be the final width?
final width needs to be 193px
padding is 10px
never midn
i got it
22:31
re
193px - 10px padding left - 10 px padding right = 173px width
any more CSS questions anybody?
while I'm here ask anything you always wanted to know
okay then, have a nice time!

« first day (102 days earlier)      last day (509 days later) »