A few days ago I found this nice psd Landing Page and I'm not sure how to style it. I've seen this kind of styling long time ago.
Should this line be an image or something?
Moreover, can you send me some code examples of similar style?
Screenshot
I have wanted to make one of these before so I whipped this up in 10 minutes, I am using SCSS - to view plain CSS click the drop down chevron next to "CSS (SCSS)" then "View Compiled CSS".
http://codepen.io/z-/pen/bwPBjY/
Analysis of what I have used:
Each event is .entry and they are all contained within .entries, .entries is centered using margin:auto and given a width with a percentage with a maximum width with pixels in order for various screen size support.
Every other entry is on the same side so I'm using :nth-child(2n) to select all even numbered entries so I can float them to the right and text-align to the left; I will be using it to override default styling given to the odd numbered enties.
To put entries on either side of the line I make the width calc(50% - 80px) which basically means that there will be an 80px gap between the text and the line because we are floating outward. We also want the entries to be fairly close height-wise (the image you gave the vertical spacing is uneven so I just ignored it and did my own thing) so we give a negative margin-top of -60px, we also want to make sure that the overlapping that we do is what we want so we need to add in clear:both to stop elements drifting into the open space; so the first entry doesn't vanish off the top of the page we can use the :not() selector .entry:not(:first-child) {margin-top:-60px;} and this will give the negative top margin to all but the first element.
To add the circles we use pseudo-elements :before or :after, I'm using the title as the base and just make a circle and move it out towards the line a number of pixels.
If what I've said has just gone over your head then I suggest you get some base knowledge from somewhere like https://codecademy.com/
Related
I am trying to design the table below (see below UI design). However, I cant seem to find a way to render it in HTML and CSS as depending on the information received from the API, the working hours may range. Hence, I don't know how to create the styles to create a continuous bar (with a shadow) and have to resizable. I don't think a HTML table will work as styling a value that spans between cells didn't seem to work. Any ideas?
You didn't post any code of what you have tried, but generally speaking, you could achieve that by having same-width inline-block elements for the time indications at the top for the continuous bars use divs which have position: absolute (with their white background as relative-position parents/anchor elements) that have according percentage left/right values to determine the start and end points, a fixed height, a border-radius which is half of the height, background-color, borderand box-shadow as desired, and text-align: center to center their text-content.
Difficult to come up with a good title - by all means, change if you can.
Traditionally, a margin on an element can be used to move elements around a page relative to its previous elements. So, if I had a div as a column on my page I could shift elements vertically within that by setting their top-margin CSS property.
This is handy in dynamic pages where some elements might not exist according to given condition, eg, a very simple example here:
https://jsfiddle.net/jhartnoll/4s6pcLu0/1/
I have simply defined a column with a div element, positioned two other div elements and made one of them have a 2em vertical gap between it and its predecessor.
If you remove (or set Display:none) element #one then element #two is shifted up the column and positioned 2em from the top of the column, rather than 2em from element #one which is no longer there.
However, if I try to do a similar thing using a CSS grid, thus making the DOM tree simpler and more flexible, I run into a problem:
https://jsfiddle.net/jhartnoll/xvhycg0k/11/
In this case, the columns are set by the CSS grid so are sort of pseudo columns, but when I set my elements to have margin-top: 2em the margin is calculated from the top of the grid column, not relative to a predecessor element.
Therefore, if element #one is not present, #two simply remains 2em down from the top leaving a gap above...
This behaviour renders margin-top useless, because it is exactly interchangeable with top on relative positioned elements.
Is this a bug with CSS Grid, or am I using it wrong, or is there a way around this?
CSS Grid seems great, but I have run into several problems like this where dynamic content is concerned, if elements have potentially variable heights, or may not be there at all, the Grid leaves other elements floating in space, unable to shift up.
EDIT for clarity of the dynamic problem
Thanks for the comments so far. The problem is not with using the layout, I understand how to set up grids, and rows, define sizes, spaces, span etc, the problem is with dynamic content.
Supposing I have an extremely simple product page:
https://jsfiddle.net/jhartnoll/xvhycg0k/42/
Irrespective of the grid spacing, row/column size etc, the concept is simply that I have thrown in a "Price reduced by 10%" splash element above the product title.
Naturally, product pages would be using templates and therefore the HTML and CSS should be fixed and flexible enough to enable elements to be missing or present.
Not all product pages will display the 10% off deal, so on those pages, I would want the Product Title to shift up into the top element position.
This, as far as I can tell, cannot be achieved with grids.
Similarly, if there was a div which contained a product description and underneath it some product cross promotion or something, the description might be of variable length, so with the div as a column example in the my original question, the content would automatically expand the description grid and shift the cross promotion stuff down the page. Again, this can't be achieved with grids?
So, I was messing around with using a grid defining columns only and simply one row per page so that content could be stacked in columns similarly to the original div as a column example, but then I ran into this margin-top problem which, within a Grid is that margin-top is relative to the grid top, not to the elements above.
So I can't find a way of creating a dynamic website, using a template design which allows for conditional elements and variable element dimensions using Grid and without using Javascript to manipulate on page load.
In my mind, there should be an option for a row-shift property to allow elements to jump down a row if the content is too large, or jump up if there is nothing obstructing it... or something like that anyway!
Hey try the following code I guess it will help your requirement!
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}
<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>
I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps.
Code
http://jsfiddle.net/N3VRM/3
http://jsfiddle.net/N3VRM/3/embedded/result/
Problem
I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1% margin on the pink squares, meaning they do not align with the "testing" text.
Invalid solution
The only solution I can come up with is to put a 1% margin on all content which isn't the pink grid so that they both align (i.e on the testing text), but on my production site, this is going to make it very messy. Using javascript would also be an invalid solution
Possible solution
Possibly the way to achieve this is to use the CSS nth item rule for different resolutions like below but I can't seem to get it working correctly:
#media (max-width: 1200px) {
.thumb:nth-child(3n+3) {
width:21%;
}
}
I just know there is a really smart, elegant solution to this and I can't figure it out. Points go for the cleanest, most compatible solution.
you could take a look at ways to justify align your boxes and use display:inline-block; instead of float or display:flex.
IT will send to far right and far left first & last box of each line. but boxes will not be dispatch on last line with same margin and will break the column look.
display:inline-block and text-align:justify:http://jsfiddle.net/N3VRM/4/
display:flex and flex:wrap and justify-content:space-between :http://jsfiddle.net/N3VRM/5/
But what looks close to your needs is the use of the selector nth-child(n) to count and reset specific margin to selected boxes.
So let's test : .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}
http://jsfiddle.net/N3VRM/6/
these count needs to be reset and set for each mediaquerie.
See in last fiddle linked, shadow color switching with mediaquerie.
Could someone take a look at the following link of a work in progress test page for my new website - http://goo.gl/YwGiB
I'm new to CSS, and I have come across some issues that I can't figure out without some expert help. Could someone answer me three questions and possibly an explanation of how to amend it?
1) Why does my middle column by default split itself into sections, whereas my right hand column is pretty much the same but does not have the divisions? What could I do to cause that to default in the right hand column?
2) I am looking to have a box in the right hand column running parallel to the first box titled 'news' in the centre column, and then a second running parallel underneath this (with the box titled 'blog' but it will have an irregular length. What would be the best way to do this? Would this be a case for using the standard positioning commands to shift them into place or is there a better way?
3) I have stripped the padding and margins from my h1-h3 tags (specifically the h2 tag) yet there still appears to be space above the lettering. It is more pronounced when using the font MerceariaAntique which is going to be the final font, but unfortunately I am unable to amend my html file to show this right now. I am attempting to resolve it by adjusting the line-height but I am not getting anything consistent. Is there anything else I can do other than make line-height and margin adjustments?
Thanks in advance
Firstly, in your markup, you have divided your sections using the <div> element, which is completely acceptable, however you have used the same ID to identify each of them. This is what classes are for. IDs should be unique and only used once on a page, classes can be used to apply the same styles to multiple elements.
So this:
<div id="newsitem">
should be this:
<div class="newsitem">
Answers to your actual questions now!
By default, paragraph and headings have paddings and margins set. The reason your sections have spaces is down the margin on the paragraph tag. Removing this removes the space, but also brings the text together with the next heading. You can over come this by giving the <p> tags 0 margin and giving them padding, or giving padding to the section container instead.
If you want the boxes in the right hand column to line up with the ones in the middle column, you'll have to change how your layout works so that you have rows rather than columns I think. That would make it easier to line them up.
From your description, you should then have the following layout:
middle column | right column
middle column | right column
middle column
To maintain the background colour of the centre column, you could apply the background-color property to the class .centre or to be more specific .column.centre (this type of CSS selector might not work in IE6 though).
The issue with the H2 is down to line-height, each font may have a different line-height so you will have to play with the value until you get it right. If you find you're getting the top position right, but text underneath is getting closer or overlapping, give the H2 a padding-bottom value.
I see you are using h2 and h3, but I can't find an h1 that you mentioned. I'd remove "line-height" option from your css to prevent wrong/incorrect spacing.
To run div's parallel you need to have the same padding and margin on both divs (the left and right side). To do so just create a class "floatingColumn" that would float to the left and append it to both divs with all the margins and paddings.
This has always bugged the hell out of me. Why are lists like this? If you set margin and padding to 0, you would expect it to align normally at the left where the text around it would be, but no. That's where the text within the list item tags begins, then it renders the bullets and/or numbers to the left of that, overlapping borders etc. Why have they not fixed this yet? Who in their right mind decided that to be the behavior for lists? You can't even specify an accurate padding or margin for the left to keep the numbers aligned with the normal text because it does not automatically move right when the number count reaches a higher level (e.g. 9 -> 10, it's now 2 digits and takes up more space at the left).
Anyways, a question: Is there any simple way (not using JavaScript, etc) to fix this issue, preferably in CSS? I'd like to make the numbers at the left still aligned to the right but still have the entire list aligned to the left with the text.
lists http://img338.imageshack.us/img338/8957/lists.jpg
I know you can achieve this using tables, but that's not really an ordered list, now is it?
Edit: Notice how the list-style-position property makes the tenth element push the text right, making it uneven. I want to move the dark blue box above right so that the left edge of the dark blue is aligned with the text around it, but I can't simply set a padding value because the amount it needs to move over changes depending on the number of items.
list-style-position http://img707.imageshack.us/img707/9277/liststyleposition.jpg
To get that effect use: list-style-position:inside;
http://www.w3schools.com/Css/pr_list-style-position.asp
Another (little old) article on the possibilities with lists: http://www.alistapart.com/articles/taminglists/
As the other poster mentioned, the default position is outside.
Styling lists is very hard to deal with cross-browser due to the inconsistency and bugs. I would recommend using either JS or a server-side script to generate a span element containing the number and style it accordingly ( using a loop and whatnot ).
Pretty sure it's impossible to style cross-browser taking IE's horrible list rendering bugs into account.