[css-d] need help with proper HTML markup
Hello everyone,
I am currently working on a redesign of my online portfolio and I need
an advice on proper/most effective markup of one of its parts.
The Photoshop mockup can be found here http://i.imgur.com/bCzYUXZ.jpg
and the live WIP version is at http://adamambrus.com/v2/
The specific part I would like the advice on is the short CV part
underneath the white header. It seems easiest to use a table, however
I'm not sure how it is with responsivity when resized.
Relevant markup CSS are these parts:
#
header
[...]
div id=cv
this is all the stuff i've done this is all the stuff i've done
this is all the stuff i've done this is all ne this is all the stuff
i've done this is all the stuff i've done
/div
div id=contact
you can reach me here you can reach me here you can reach me here
you can reach me here you can reach me here you can reach me here
/div
/header
#
/* line 85, global.scss */
#cv, #contact { width: 40%; float: left; background-color: #222; color:
white; height: 33.33%; background-color: #404; }
/* line 94, global.scss */
#cv { padding-right: 10%; }
/* line 99, global.scss */
#contact { padding-left: 10%; }
#
Thank you for any answers,
~Adam
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Implementing Responsive Design
i think it's a good way of thinking, the limited space does force you to go minimal and abstract as much as possible with your content and how you present it. on the topic of mobile-first vs desktop-first, there is an alternative - the goldilocks approach[1], which sits right in the middle, i'd say. ~Adam [1] - http://goldilocksapproach.com/demo/ Dne 23. 8. 2013 3:10, Colin (Sandy) Pittendrigh napsal(a): Been reading Implementing Responsive Design by Tim Kadlec--which is surprisingly well-written for an IT book. Kadlec seems to recommend building a site's CSS from the cell phone up--because some phones still don't handle media queries. In other words he starts off by making his sites look good at the smallest resolution, and then uses media queries (and sometimes Javascript) to add floats and what ever else is needed to make the site look right as the view port increases. This came as a surprise to me. I assumed everybody did the opposite: still build for the desktop, then fiddle with media queries and viewport widths to make the site acceptable for pads and phones too. His approach does sometimes require Javascript, to loop through all the block elements of a certain class and then add to add CSS as needed. What are the group's thoughts about this approach? Do you build from the desktop down, or from the cell phone up? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] height as percentage problems not new, but new to me...
hi,
after a bit of googling - The percentage is calculated with respect to
the width of the generated box's containing block. Note that this is
true for 'margin-top' and 'margin-bottom' as well. from
http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases
which cites
http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties
if, however, you were to ask me how to fix this... i don't know. yet.
~Adam
Dne 21. 8. 2013 7:28, Noel Taylor napsal(a):
This is probably an old problem, but I can't find the answer. All I need
is:
1. A floating container div whose height varies with the size of the window.
2. A fixed-size div inside whose vertical position varies with the size of
the container.
3. Another fixed-size div right underneath the one in #2.
The following code satisfies condition #1 and #3: resizing the window also
resizes the container div correctly, and the second inner div sits
correctly below the first inner div.
But condition #2 is not satisified. I thought margin-top as a percentage
would make the value vary based on the height of the parent container, but
apparently it doesn't work that way. Resizing the window does nothing to
the vertical positon of the inner div within the container div.
This doesn't seem like it should be that hard, but it's crazy! Please help!
!DOCTYPE html
html xmlns=http://www.w3.org/1999/xhtml;
head
titlecss test/title
stylehtml, body {height: 100%;}/style
/head
body
div style=float: left; height: 50%; width: 100px; background-color: #C00;
text-align: center;
div style=height: 40px; width: 40px; background-color: #0C0;
margin-top: 50%;/div
div style=height: 40px; width: 40px; background-color: #00C;/div
/div
/body
/html
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] height as percentage problems not new, but new to me...
with an extra container div and relative/absolute positioning, you can
get the desired effect... check http://codepen.io/anon/pen/eiJpr
~A
Dne 21. 8. 2013 7:28, Noel Taylor napsal(a):
This is probably an old problem, but I can't find the answer. All I need
is:
1. A floating container div whose height varies with the size of the window.
2. A fixed-size div inside whose vertical position varies with the size of
the container.
3. Another fixed-size div right underneath the one in #2.
The following code satisfies condition #1 and #3: resizing the window also
resizes the container div correctly, and the second inner div sits
correctly below the first inner div.
But condition #2 is not satisified. I thought margin-top as a percentage
would make the value vary based on the height of the parent container, but
apparently it doesn't work that way. Resizing the window does nothing to
the vertical positon of the inner div within the container div.
This doesn't seem like it should be that hard, but it's crazy! Please help!
!DOCTYPE html
html xmlns=http://www.w3.org/1999/xhtml;
head
titlecss test/title
stylehtml, body {height: 100%;}/style
/head
body
div style=float: left; height: 50%; width: 100px; background-color: #C00;
text-align: center;
div style=height: 40px; width: 40px; background-color: #0C0;
margin-top: 50%;/div
div style=height: 40px; width: 40px; background-color: #00C;/div
/div
/body
/html
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] height:100% issue on mobile browsers
hello, url: http://www.gjh.sk/~ambrus/emental/ css: http://www.gjh.sk/~ambrus/emental/assets/css/global.scss when viewed on desktop, everything works as it should. however, on iOS6 Safari the images contained in the gallery slider are displayed as 1:1 (ie. they don't shrink to the container's height - html, body, and all nested containers have height:100%; set for proper inheritance, this works on desktops). does anyone know what the problem could be? thanks for any answer, Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] firefox not shrinking resized image's container
hi all, i have two floated aimg/a elements that behave as they should in all browsers except in firefox (20, 21, 22), where the images are correctly resized (to height: 100%;), but their container doesn't shrink. what could be causing the problem and how could i fix it? the website is at http://www.gjh.sk/~ambrus/emental/ and the SCSS is at http://www.gjh.sk/~ambrus/emental/assets/css/global.scss and the problematic elements have coloured background. thanks for any answer, Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] img height acting funky few bugs
hello everyone, i am building my web portfolio ( http://www.gjh.sk/~ambrus/emental http://www.gjh.sk/%7Eambrus/emental , SCSS - _http://www.gjh.sk/~ambrus/emental/assets/css/global.scss_ ) and i am having few issues with cross-browser compatibility. the idea of the webpage is to have a single page layout, with fixed header and footer and full screen height image presentations one after another, with an image 'carousel' as the gallery. (i will be adding functionality later on, but first i wanted to have this landing page sorted out). SO anyway, so far the design works well and as expected in Chrome (v27, screen res 1280x800), all other browsers have issues. one particular issue is the height of the images in the .carousel - where in Chrome they take the 100% height of the screen, all other browsers display the images in their 1:1 scale. the second major annoyance is that internet explorer adds funny blue borders around the .svg navigation images, and Opera does not display them at all. so, if you had any ideas on what to rethink or rewrite in the css, i'd be happy to listen to them. Best Regards, Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] img height funky behaviour IE image border
hello everyone, i am building my web portfolio ( http://www.gjh.sk/~ambrus/emental, SCSS - http://www.gjh.sk/~ambrus/emental/assets/css/global.scss ) and i am having few issues with cross-browser compatibility. the idea of the webpage is to have a single page layout, with fixed header and footer and full screen height image presentations one after another, with an image 'carousel' as the gallery. (i will be adding functionality later on, but first i wanted to have this landing page sorted out). SO anyway, so far the design works well and as expected in Chrome (v27, screen res 1280x800), all other browsers have issues. one particular issue is the height of the images in the .carousel - where in Chrome they take the 100% height of the screen, all other browsers display the images in their 1:1 scale. the second major annoyance is that internet explorer adds funny blue borders around the .svg navigation images, and Opera does not display them at all. so, if you had any ideas on what to rethink or rewrite in the css, i'd be happy to listen to them. Best Regards, Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] min-height, max-height, vertical centering and few other things
hello all, it's me again. i have a mockup of the new design here http://www.flickr.com/photos/king-muffin/6069114194/in/photostream , its work-in-progress here http://adif.sk/testversion/ with the important files here http://adif.sk/testversion/index.html and here http://adif.sk/testversion/index_style.css . i really hope i'm not going to end in spam filters because of the links :D anyway, the problems, or the TODO-list: 1) the background image. rright now, it doesn't show up in the IE6, i need to get to that. if you knew about a good tutorial on fixing static positioning in IE6, please let me know. also, i will need to add there a jQuery sliding gallery, so that it would show projects, and not this temporary background. KEYWORDS/TAGS: IE6 static positioning, jQuery sliding fading automatically changing gallery 2) the black bars above and below silver content. please see Opera and Firefox renderings for the contrast; there are some issues with the min-height property being interpreted differently. HOWEVER, before i start solving this problem, i would like to point out a third issue: 3) the vertical centering of the content. the behaviour i would like to achieve is as follows: - max-height of the #header and #bottom to be 100px - min-height of the #silver-middle to be 600px - if the #silver-middle's content doesn't stretch the page vertically (ie. its height is around the 600px), center it vertically and stretch #header and #bottom accordingly. - if the #silver-middle's content does stretch the page vertically (like it does now, on 6.9.2011), i don't really need to care about #header's and #bottom's height, just don't let them grow over 100px, so it doesn't make a mess. i would really like some aid from you on this third issue, as so far i was unable to yield successful results, and in the question of design this is my greatest concern at the moment. 4) implement dynamic loading of content in the left part of the screen, after clicking the navigation's left and right buttons. what would be the simplest way? am i able to generate the needed html dynamically, if i (the script) had access to the mysql database? how is it with security? if you reached this point, thank you for reading my wishes. i would be very thankful if you could help me with any of these issues. ~Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stretch one div vertically in three column layout
On 25. 8. 2011 21:12, David Laakso wrote: ... i have come to a pretty stable css, when it comes to rendering it with firefox or chrome. but the internet explorer gives me headache and behaves absolutely idiotically :( can you please refresh the page and hint me, what might be wrong, or how could i resolve the issues? i am not going to describe them, i think you will understand the frustration when you see the IE rendering :) thank you all for your time For those among us who suffer from short-term-memory-loss and/or don't have time to look it up: --what is your url? --what versions of IE do you need to hit? ie 6/7 reference: http://www.satzansatz.de/cssd/onhavinglayout.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ sorry, i forgot to include the links in the e-mail, since thunderbird's threaded view of messages is very convenient :) thank you for that link, it seems very helpful, i'll read it through and let you know if i had any progress. ~A __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stretch one div vertically in three column layout
On 24. 8. 2011 21:35, Chetan Crasta wrote:
1) my wrapper div somehow doesn't stretch and lets the inner
content overflow and i have no idea what is causing that.
Try #silver { overflow: hidden; padding-bottom: 6.5em; }
2) i don't know how to hide the text from ul li's and let only
the images see through...
Try #navigation ul a { text-indent: -1000px; }
Regards,
Chetan Crasta
thanks, that text-indent helped me :)
also, i have come to a pretty stable css, when it comes to rendering it
with firefox or chrome. but the internet explorer gives me headache and
behaves absolutely idiotically :( can you please refresh the page and
hint me, what might be wrong, or how could i resolve the issues? i am
not going to describe them, i think you will understand the frustration
when you see the IE rendering :)
thank you all for your time
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] stretch one div vertically in three column layout
hello all, i am currently working on a redesign of an architectural studio's page. the original/current version can be found at www.adif.sk http://www.adif.sk . the mockup of the new design is here http://www.flickr.com/photos/king-muffin/6069114194/in/photostream and finally, the new design *in progress* is at http://adif.sk/testversion/index.html with the CSS located at http://adif.sk/testversion/index_style.css (the backgrounds are colored only for my orientation, i find it easier to work with :)) the problem i am having is that i am unable to stretch the black bar (div id=navigation) from the very top to the very bottom of the page's content. although body stretches according to all of its conaining divs (demonstrated by the light pink), i don't understand why does height:100%; in the navigation div take only the 100% of the viewport size. also, i would like the #left and #right divs' bottom edges to be always at the same level, whether there is more content in the #left or the #right div. thank you for any answers, tips, critiques, comments etc., Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stretch one div vertically in three column layout
On 23. 8. 2011 18:46, David Laakso wrote: On 8/23/11 8:08 AM, Adam Ambrus wrote: hello all, i am currently working on a redesign of an architectural studio's page. the original/current version can be found at www.adif.sk http://www.adif.sk . the mockup of the new design is here http://www.flickr.com/photos/king-muffin/6069114194/in/photostream and finally, the new design *in progress* is at http://adif.sk/testversion/index.html with the CSS located at http://adif.sk/testversion/index_style.css (the backgrounds are colored only for my orientation, i find it easier to work with :)) the problem i am having is that i am unable to stretch the black bar (div id=navigation) from the very top to the very bottom of the page's content. although body stretches according to all of its conaining divs (demonstrated by the light pink), i don't understand why does height:100%; in the navigation div take only the 100% of the viewport size. I guess that you have resolved this since you first posted to the list? also, i would like the #left and #right divs' bottom edges to be always at the same level, whether there is more content in the #left or the #right div. There is a page on the list wiki that discusses various methods for achieving this... http://css-discuss.incutio.com/wiki/Any_Column_Longest thank you for any answers, tips, critiques, comments etc., Adam Best, ~d __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ hello, thanks for the answer and links, in the meantime i stumbled upon them from googling. yes, i have made progress since the posting :) my problem is now that: 1) my wrapper div somehow doesn't stretch and lets the inner content overflow and i have no idea what is causing that. 2) i don't know how to hide the text from ul li's and let only the images see through... ~Adam __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 weird disappearing bug
hi and thanks for answer, things can always be simpler than they are now :) the thing is, i thought that a 2 (on other pages, 3) column design with a footer would be the simplest solution. the background image's size depends on the page's viewing resolution, so it would be proportionally the same on all monitors. on the image menu: i wanted to go with one div for the menu, as the same identifier can be used on both main page (2column) and subpages (3column). in subpages, the main (left) column from the main page is simply cut into two, offering left column space for text, the right one for images. by now, i still haven't found out the solution to the footer problem, so i leave the webpage as is on the host for later visitors to come/see and maybe help :) 2009/10/4 r...@catjuggling.com I'm fairly new to CSS, so I'm sure there are other people who can give better advice. So far, there are no responses so I will give it a shot. I felt like the CSS could be simpler and still achieve the same design. Since I'm not sure how to solve the problem you asked about, I thought about other ways I would approach the building of the page. First off, in the markup, I would put things in the order they appear on the page, which would eliminate a need for any relative or absolute positioning: It seems like the H1 and H2 text at the top would more naturally be put in a header instead of further down. The photo and the menu could go together in a div below that, floating the photo to the left, and the menu to the right. The background image can be centered in the background of the wrapper div. It's not an exact match, but here is what I came up with: http://www.mcmullincreative.com/u3/ I reduced the images sizes to actual size, which made the file sizes smaller. I had to use this doctype to allow IE6 to center the wrapper div: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; Hope this helps. Russ I when you check the page in FF, and then in IE6, you will see the problem :) in words, basically i created a 2column design, which do not take up the full width of the page and are both floated left. when i want to create a footer, simply adding 'clear:left;' works for firefox, and in fact IE6 too. but the problem is, that the background image (sitting in its own div) and the menu (also another div) disappear in IE6 :) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 weird disappearing bug
hello, i am working on another website for school, this time it is located on http://www.gjh.sk/~5ambrus/FA%20VUT/VY1/u3/ and the css http://www.gjh.sk/~5ambrus/FA%20VUT/VY1/u3/style.css when you check the page in FF, and then in IE6, you will see the problem :) in words, basically i created a 2column design, which do not take up the full width of the page and are both floated left. when i want to create a footer, simply adding 'clear:left;' works for firefox, and in fact IE6 too. but the problem is, that the background image (sitting in its own div) and the menu (also another div) disappear in IE6 :) any ideas pointing out where could the problem be will be appreciated ~Adam __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] firefox ignoring the background-color
hello, i know that similar issues are being raised in recent days, however i am unable to find a solution to my problem. http://www.gjh.sk/~5ambrus/adif -the site the problem occurs, when you move the mouse to the middle item. all browsers pop-up the menu with black text, green background-color and white border. only firefox completely ignores the background color set to these very items; at any other place it shows the background-color set. if you could help me with this issue, i would appreciate it very much :) also, if you had tipstricks how to make certain things better/simpler those advices are also very welcome :) thanks for any answers, Adam PS: i know that you are skilled and are able to view the source code of both the html page and the CSS, but for the sake of simplicity, http://www.gjh.sk/~5ambrus/adif/index_style.css :) PPS: also, do you know why the IEs 'see' the parent ul item and thus change back the image? this does not happen in FF or Opera. thx again __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] firefox ignoring the background-color
thank you for replies, Chrome and Safari are the only browsers i do not have installed on my pc, thanks for pointing out :) i thought that webkit is webkit, but... yeah, opera might be already using the new Presto or what. now that we know where else this problem occurs, are there any suggestions how to fix it? also i have to add that when the background-color is rendered (opera ie), the menu works fine as the mouse's focus does not drop below the item-level (as it is prevented to do so by the background-color). __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New site went live today
yeah, looks good :) however, check the source - script language=JavaScript type=text/javascript src= http://INSERT-DOMAIN-AND-PATH-TO-CODE-HERE/s_code.js; is taht really neccesary ? :) 2009/8/28 Sarah Atkinson sarah.atkin...@cookmedical.com I have been working on this site for almost a year and today it when live ..YAY http://cookbiotech.com Check out my nice css people on the products page (rollover and click on them) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
