I'm currently trying to learn adaptive/mobile web-design, which involves media queries for different platforms and resolutions, using em rather than px in designs etc. I am currently trying to place two em-width elements next to each other; a navigation/info bar next to my content.
I have set the info bar to be 16em wide (translates into 16px per em according to font-size) and the content to be calc(100% - 17em) wide. I'd assume this should leave 1em of margin between the menu and the content, no matter how much I zoom and resize my window, but the end result disagrees:
100% zoom
25% zoom
friend's screen
The space between the elements changes vastly by zoom level, although everything universally uses 'em' units and the font-size is not changed between relevant elements. What could possibly be the issue?
Info: I'm using a media query to transition the navigation from horizontal alignment to a sidebar. It's the queried version that is acting up. Keep this in mind when looking over the CSS. It might be part of the problem, though I seriously doubt it...
#contentwrap {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
}
#content {
border-radius: 8px;
padding: 2em;
#navbar {
margin-top: 1em;
border: 1px solid #000;
border-radius: 8px;
width: 100%;
display: table;
font-family: 'Cabin', sans-serif;
}
.navelement {
font-size: 0.8em;
width: 25%;
padding: 1em;
text-align: center;
display: table-cell;
}
#nav4 {
}
#media (min-width:1580px) {
#navbar {
border: 1px dashed red;
padding: 0px;
width: 16em;
float: left;
background-image: none;
}
.navelement {
font-size: 0.8em;
background-image: url('../img/navbg.png');
background-size: 100% 100%;
width: 20em;
display: inherit;
border: 1px solid;
border-color: #303030 #101010 #101010 #101010;
border-radius: 8px;
margin-bottom: 1.25em;
padding: 1.25em;
}
#nav4 {
background-image: url('../img/navbg.png');
background-size: 100% 100%;
margin-bottom: 0em;
}
#contentwrap {
float: right;
width: -moz-calc(100% - 17em);
width: -webkit-calc(100% - 17em);
width: calc(100% - 17em);
}
}
HTML code:
<div id="navbar">
<div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
<div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
<div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
<div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
</div>
<div id="contentwrap">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
</div>
</div>
The content of your #navbar is wider than the width you have given to the #navbar itself.
#navbar would be 16em+2px = 258px (at a font size of 16px), while the content would be 20em+2.5em+2px = 290px (at a font size of 12.8px).
And since the #navbar has display:table, its own width will adjust itself to the width of its children rather than let the content overflow out of its boundaries. Tables do that.
So, calc(100%-17em) for the remainder doesn't make it. Either calculate a smaller width, or, since the navbar has float:left anyway, you can leave out the width altogether! Simply set the left margin if desired and you're done.
See Fiddle.
Related
I'm trying to find a way to create a custom highlight in CSS that takes up ~50% of the text height, centered vertically, that also works over multiple lines. I can do it a few ways that work on a single line, but all fall over when applied to multi line text, or aren't able to vertically center.
hr {
margin: 15px 0;
}
.title-psuedo .background {
position: relative;
padding-left: 40px;
padding-right: 40px;
}
.title-psuedo .background:after {
content: "";
position: absolute;
width: 100%;
background: yellow;
left: 0;
bottom: 0.3em;
height: 0.4em;
z-index: -1;
}
.title-mark mark {
display: inline-block;
line-height: 0em;
padding-bottom: 0.5em;
padding-left: 40px;
padding-right: 40px;
}
.title-shadow .background {
box-shadow: inset 0 -0.5em 0 yellow;
padding-left: 40px;
padding-right: 40px;
}
.title-background .background {
padding: 0 40px;
line-height: 0.5em;
margin: 0.25em 0;
background-color: yellow;
display: inline-block;
}
<div class="title title-psuedo">
<span class="background">This is the desired effect.</span>
</div>
<hr>
<div class="title title-psuedo">
<span class="background">This works on one line, but not when the text spans onto 2 separate lines, as the background messes up and only appears on the last line of the content.</span>
</div>
<hr>
<div class="title title-mark">
<mark>This works on one line, but not when the text spans onto 2 separate lines, as the lines merge into one single line which isn't legible. Also, I'm not sure the highlight can be centered vertically.</mark>
</div>
<hr>
<div class="title title-shadow">
<span class="background">This works on multiple lines, but I'm not sure the highlight can be centered vertically. Additionally, the second line does not have the same padding as the first.</span>
</div>
<hr>
<div class="title title-background">
<span class="background">This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second line does have the initial padding however.</span>
</div>
Use gradient and box-decoration-break
.title {
--lineHeight: 1.4em;
}
.title span {
line-height: var(--lineHeight);
padding: 0 40px;
background: linear-gradient(yellow 0 0) 0/100% calc(var(--lineHeight)/4) no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.title {
margin: 0 20px;
}
<div class="title title-psuedo">
<span class="background">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget mi vitae felis molestie volutpat. Integer viverra arcu id turpis molestie, id mollis enim molestie. Proin luctus auctor dictum. Maecenas nec libero bibendum, semper erat a, tristique nunc. Fusce accumsan feugiat ante,</span>
</div>
I found a solution with the help of repeating-linear-gradient() CSS property. In my solution you must define font-size and line-height. Then according to them you define the last number in repeating-linear-gradient(). Here is my code:
.text-deco .background2 {
line-height: 2;
font-size: 1rem;
display: block;
background-image: repeating-linear-gradient(transparent,transparent 0.9rem,yellow 0.9rem, yellow 1.1rem,transparent 1.1rem, transparent 2rem);
}
<div class="title text-deco">
<span class="background2">This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second nd the highlight covers both lines without a gap. The second</span>
</div>
I mean that for example If you want to have font-size:2rem and line-height:2 then you must change the last part (transparent 2rem) of repeating-linear-gradient() to transparent 4rem and then adjust other values in repeating-linear-gradient() according to that. For example 1.1 may change to 2.8. Maybe now my settings does not show the highlight in exact vertical position, but you can adjust values to reach your desired one.
This issue is related to the topic mentioned here.
I managed to fix my previous CSS code to get the effect of having text aligned to the middle of the picture, but now I would like to add a header to the text. My problem is that I have troubles with aligning the header, currently it looks like this: https://jsfiddle.net/u8db2j75/ , but I would like to achieve the effect like this: http://i.imgur.com/fFuohml.png where the header text is right above the normal text. I don't know why in my solution there's this huge gap between the header and the text. Could you help me with my issue? My current css code is as follows:
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 60rem;
/* 960 */
margin: 0 auto;
}
.item {
width: 100%;
overflow: hidden;
margin-bottom: 5rem;
display:table;
/* 80 */
}
.item__img,
.item__info {
width: 50%;
display:table-cell;
vertical-align:middle;
}
.item__img {} .item__img .img-map {
width: 95%;
height: 18.750rem;
/* 300 */
}
.item__img img {
width: 95%;
height: 18.750rem;
/* 300 */
}
h2 {
font-weight: normal;
font-size: 4rem;
/* 64 */
text-align: left;
}
and current html code is this:
<div class="container" role="main">
<article class="item">
<div class="item__img">
<div class="img-map">
<img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
</div>
</div>
<div class="item__info">
<h2>HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
rutrum ornare.</p>
</div>
</article>
</div>
Thanks!
When you have a heading followed by a paragraph, there are (generally) no more than 4 style declarations that create a visible vertical gap between the heading and the paragraph. These 4 style declarations are (in order):
1) The padding-bottom of the heading;
2) The margin-bottom of the heading;
3) The margin-top of the paragraph;
4) The padding-top of the paragraph;
With more advanced layouts, declarations like line-height will also play a role, but we don't need to worry about that for now.
Therefore, if you want to ensure that there is zero visible gap between the second-level heading and the paragraph which follows it, you might declare the following rules:
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
p {
margin-top: 0;
padding-top: 0;
}
Of course, if we leave it there, the style rules for the paragraph above will apply to all paragraphs. If we want these style rules to apply only to paragraphs which immediately follow an <h2>, then we can make the styles above slightly more explicit by declaring:
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
h2 + p {
margin-top: 0;
padding-top: 0;
}
The + selector above indicates that the rules only apply to the element after the selector when it is the sibling which immediately follows the element before the selector.
Now that you have zero visible gap between the <h2> and the <p>, you can tweak your margins and paddings as appropriate.
The answer to this lies in the answer I gave on the previous question. There's spacing because the browser applies it's own stylesheet.
Here's what firefox adds:
h2, *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
}
You just need to add a style that overwrites the margin.
As I mentioned before, you can use a developer console either in Google Chrome, or by adding Firebug to Firefox. This will allow you to see what styles are being applied to which elements on the page, just by pressing F12.
You must reduce the bottom margin of h2 (53px) and the top margin of (16px)
h2 {
font-weight: normal;
font-size: 4rem;
/* 64 */
text-align: left;
margin-bottom: 0px;
}
p{
margin-top: 2px;
}
Inspect the code and you'll see a margin applied to your <h2> :
This is caused by default CSS value.
It is very recommended you add * {padding: 0; margin: 0;} to disable default padding/margin on every element, then you'll be able to add your own margins/paddings on whatever you want.
I need the following field validation effect but I am struggling to come up with the CSS.
Basically at the moment I can show a red info sign at the end of field if it is required (this happens after the form submit happens):
I like this but I would also like a detailed message to appear when you hover over the red exclamation mark - ideally centrally just underneath the input box, like this:
How would I do this?
I have started some CSS already but need help to get it finished - see the link below.
http://cdpn.io/rKLhl
You are asking a lot of different things within one question... here are the main points:
Demo: http://jsfiddle.net/LNr6f/1/
1) You have to create an hidden div, and show it when you need to trigger the error message (I've used the hover event as trigger, just adapt it to your needs);
2) You can create rounded borders with CSS border-radius;
3) You can create gradiented backgrounds with CSS, and you are lucky because there is a CSS Gradient Generator out there that will provide a nice Editor and the cross-browser code for you (I've used a simple red background in the example);
4) You have to keep the position of the tooltip related to the textbox one; use relative and absolute positioning as in the example.
5) You need an arrow, that can be an image, but that can be created with pure CSS too, as in the example, using CSS pseudo-class :before (or :after), with three transparent borders and one colored, collapsing on each others and creating the triangle effect. Then you need to move it out of your div and to center it on the x axis, with the help of absolute positioning.
You can start from here, good luck.
Sample HTML
<div id="container">
<input type="text" class="trigger" />
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc gravida commodo mauris non sodales. Nunc consectetur
mattis arcu eu pharetra. Curabitur metus felis, tempus eu
mattis ut, auctor euismod lacus. Praesent ultrices convallis
odio, at vestibulum nulla faucibus nec. Nam euismod suscipit
massa, non euismod dui gravida ut.
</div>
</div>
Sample CSS
#container {
position: relative;
border: 1px dashed silver;
width: 100%;
height: 300px;
}
#container > .trigger{
width: 300px;
}
#container > .tooltip{
position: absolute;
display: none;
background-color: red;
width: 200px;
left: 50px;
top: 40px;
border-radius: 10px;
padding: 10px;
color: white;
}
#container > .tooltip:before {
position: absolute;
content: '';
border-width: 10px;
border-style: solid;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) red rgba(255,255,255,0);
top: -20px;
left: 90px;
}
#container > .trigger:hover + .tooltip {
display: block;
}
I have a 2 column HTML/CSS layout and I am having an issue with <div>sidebar</div> where the div doesn't expand all the way down the side of the content (in other words, there is a large gap between the bottom of the "sidebar" div and the "footer" div and it results in ugly white space that I would like to get rid of.
sandbox.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
My Header
</div>
<div class="sidebar1">
<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<p> </p>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus dolor nec ante imperdiet malesuada. Phasellus nec ipsum ipsum. Pellentesque lacus elit, tempor vitae laoreet nec, condimentum vel magna. Mauris imperdiet consectetur egestas. Praesent pellentesque, turpis ultricies elementum pellentesque, felis arcu consequat diam, quis viverra libero nibh a massa. Proin nec lectus at lorem semper hendrerit. Curabitur sed diam ut nisi ultrices vestibulum vel eget leo. Donec dapibus sem vel ipsum vestibulum suscipit. Donec faucibus ipsum eu neque facilisis blandit. Vivamus rhoncus odio in nibh pretium elementum.
Morbi adipiscing odio eu nibh gravida eu cursus risus luctus. Cras malesuada fermentum fermentum. Aliquam neque magna, pellentesque nec lobortis eget, scelerisque eu elit. Curabitur commodo leo porttitor eros commodo a venenatis odio vehicula. Aenean sodales diam ac orci interdum aliquam. Nulla sodales enim ut leo porttitor in mollis est consequat. Morbi lobortis nunc nec mi varius varius. Mauris ac velit eget augue cursus viverra. Mauris ut felis vehicula urna aliquet sodales ut vel purus. Pellentesque sed mi felis. In leo urna, dignissim et vestibulum tristique, lobortis quis est. Nulla tincidunt consequat mi a volutpat. Aenean ut arcu nibh, ut placerat augue. Etiam sollicitudin orci id neque ornare a euismod metus imperdiet.
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
twoColLiqLtHdr.css:
#charset "UTF-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #699643;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:hover {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 1260px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
overflow: hidden;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #A9B92E;
}
.sidebar1 {
float: left;
width: 20%;
background: #94c493;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
float: left;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
background: #E8EEC7;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #FDEAA6;
color: #000;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #A9B92E;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/* style the results tables */
#stylized p {
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
table.decorated {
margin: 1em 1em 1em 2em;
background: whitesmoke;
border-collapse: collapse;
}
table.decorated th, table.decorated td {
border: 1px silver solid;
padding: 0.2em;
}
table.decorated th {
background: gainsboro;
text-align: left;
}
table.decorated caption {
margin-left: inherit;
margin-right: inherit;
}
table.decorated tr:hover {
background: lightsteelblue !important;
}
/* Create the scrollable "boxes" */
.scrollArea {
width: 200px;
height: 300px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
</style>
Ahh, getting columns to line up vertically. The dark side of CSS. You have two options:
Use some slightly convoluted, but well documented, CSS. This fellow here has an excellent template you can use which I've used before, and it works great.
JavaScript. Using jQuery, you can set the height of the smaller div to the height of the bigger div after all the content is rendered.
Stop using floats for layout unless you need to support IE7 or lower:
.sidebar1 {
display:table-cell;
width: 20%;
background: #94c493;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
display: table-cell;
}
Example. You may want to add some extra padding to the .content element because margins won't work inside display: table-cell;, like this.
If you don't care for IE7 you can do it as simple as this:
<style>
div.sidebar_ {
display: table-cell;
width: 20%;
background: red;
}
div.content_ {
display: table-cell;
width: 80%;
background: blue;
}
</style>
<div class="sidebar_">
Sidebar
</div>
<div class="content_">
Content<br>
Content<br>
Content<br>
Content<br>
</div>
Works in IE8 and better and in any other browser.
In some cases, equal-height columns can be faked by adding a bg image to a parent container, or by splitting the columns into header-content-footer sections and putting the footer for each in a separate container (and doing the same for the header sections if needed). If the columns have a fixed width, you'll have a lot more options available.
<div class="container-with-bg-image-for-all-columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
or...
<div class="content-container">
<div class="col1-content"></div>
<div class="col2-content"></div>
<div class="col3-content"></div>
</div>
<div class="footer-container">
<div class="col1-footer"></div>
<div class="col2-footer"></div>
<div class="col3-footer"></div>
</div>
If the need is great enough, don't forget about the option of using an HTML table for the columns. That's the only easy way to have full control over the size and alignment of columns. I haven't tested display:table and the other table-related display values, but that may be another way to get the vertical advantages that HTML tables offer.
I'm building a website that displays a vertically stacked list of comments that are placed by users.
The text should appear in a text balloon that basically displays the name of the user, there under the text and finally in the text balloon footer, it shows two links and floated to the right, a time stamp.
Since design/layouts are not my thing, it took me some painful days to achieve this in pure CSS (requirement) and I managed to make the list appear very neatly. For that I have tried to study the CSS that Google and Twitter use to show resp their video's and Tweets and try to extract some useful stuff from it. However, I noticed their CSS's and HTML are huge and I'm questioning if they did it the "right" way or if they found out that was the only possibility in order to make it display well on all types of devices. (Can somebody shed some light on that perhaps?) Conclusion is that it was not very useful for me.
However, the result doesn't feel good and is very "touchy" (not flexible at all); for instance, when I resize my window or open the page on my tablet, it just looks disgusting; text block wrapped and displayed under the avatar image...
Question 1: as I mentioned, I have been looking /studying a lot by looking how the big sites (such as YouTube, Twitter and FaceBook) doing similar things and the HTML/CSS looks a bit messy in my opinion. Anybody sharing that thought/opinion?
Question 2: can someone provide me a with good starting point, i.e. HTML/CSS Example (preferably in a JSFiddle or so) for the following:
Some remarks:
No images should be used (expect from the avatar image offcourse)
No tables should be used; only Div's and/or HTML-5 sementics (such as header, footer, article, and so on)
The CSS/HTML layout should be that flexible that it adjust itself properly. On the image you can how I would like to have it displayed in different scenarios.
Should display well in latest version in IE, FireFox, Safari and Chrome.
Given the following mark-up:
<div class="wrap">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="comment" data-owner="Dexter">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
<ol class="postscript"> <!-- links and timestamp -->
<li>link 1</li>
<li>link 2</li>
<li class="date">3 days ago</li>
</ol>
</div>
</div>
And the following CSS:
div.wrap {
width: 90%;
margin: 0 auto 1em auto;
position: relative; /* the image will be absolutely-positioned relative to this */
}
div.wrap:first-child {
margin-top: 1em; /* just for aesthetic reasons, adjust or remove, to taste */
}
div.comment {
font-size: 1em;
position: relative; /* the arrow on the left side of the div positioned relative to this element */
margin-left: 60px; /* allows a 10px gutter for the arrow to fit into */
border-radius: 0.75em 0.75em 0.75em 0.75em;
background-color: #ccc;
line-height: 1.4em;
font-family: Helvetica; /* or whatever... */
}
div.comment::before { /* requires a fairly modern browser */
content: attr(data-owner); /* displays the name of the comment-owner */
border-radius: 0.75em 0.75em 0 0;
background-color: #ccc;
display: block;
text-indent: 10%; /* adjust to taste */
border-bottom: 3px solid #999;
}
div.comment::after { /* again, requires a fairly modern browser */
content: ''; /* this property is necessary, even if only an empty string */
position: absolute;
top: 50%;
left: 0;
border: 10px solid transparent;
border-right: 10px solid #ccc; /* forms the 'arrow' */
margin: -10px 0 0 -20px;
}
div.comment p { /* or whatever, adjust to taste */
width: 80%;
margin: 0 auto 1em auto;
padding-bottom: 1em;
}
img {
position: absolute;
top: 50%;
width: 50px;
float: left;
border-radius: 10px;
margin-top: -25px;
}
p + ol.postscript {
width: 80%;
font-size: 0.8em;
margin: -0.5em auto 0 auto;
}
ol.postscript::after {
content: '';
height: 0.5em;
display: block;
clear: both;
}
ol.postscript li {
float: left;
margin-right: 0.5em;
}
ol.postscript li.date {
float: right;
margin-right: 0;
}
.wrap a:link,
.wrap a:visited {
color: #333;
text-decoration: none;
border-bottom: 1px solid #333;
}
.wrap a:hover,
.wrap a:active,
.wrap a:focus {
color: #f00;
border-bottom: 1px solid #f00;
}
JS Fiddle demo.
Edited in response to the valid comments, left below:
I don't think screen readers reads attributes which means it would probably be better to put the content of data-owner inside its own element, instead of an attribute.
One quibble (as noted above too) [Screenreaders will not read CSS generated content](One quibble (as noted above too) Screenreaders will not read CSS generated content and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.) and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.
Given the sound advice, I've replaced the .comment::before element, adding a discrete h2:
<div class="wrap">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="comment" data-owner="Dexter">
<h2 class="owner">Dexter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
<ol class="postscript">
<li>link 1</li>
<li>link 2</li>
<li class="date">3 days ago</li>
</ol>
</div>
</div>
and appended the following CSS (in place of the original .comment::before):
div.comment p {
width: 80%;
margin: 0 auto 1em auto;
}
Revised JS Fiddle.