http://www.cultpops.com
^ I'm trying to get the text in the black section of my site (Lorem ipsum...) to look like the text on http://shop.balticmill.com/ (under the FRESH AS A DAISY section). So pretty much centered but with parameters. Surely there is a simple way to do this and I am just making it more complicated than it needs to be. Any help would be greatly appreciated. Cheers!
just assign this CSS to the p element
width: 40%;
margin: 0 auto;
If you just add padding to the container it will push the text in
padding: 0 100px;
Related
When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.
I know I need to include Media Queries somehow but no idea how, can anyone help me?
Thanks!
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.
The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.
For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css
hr {
border-top: 1px solid #bd6e22;
}
If you wanting to add spacing above, below or even both then add this to the styling.
hr {
border-top: 1px solid #bd6e22;
margin: 20px 0;
}
I have put 20px for an example but you can change that to what ever you want.
Hope this helps.
Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client.
then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the #media quieres for each page break size and adjust the style's accoridng to each device :D
good luck!
Chris
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
Having trouble figuring this out if anyone can help me id really appreciate it! :)
Basically im building, or well trying to build a responsive wesbite using HTML5, i have it all structured how I want and everything but one thing is wrong and i cant figure out how to correct it.
I have set a max-width for all my sections of 1000px and all the sections have been centred normally using margin: 0 auto; but all the articles inside the section are still left aligned?
I tried setting a global rule for article tags using
article {
margin: 0 auto;
}
but this didnt work so does anyone know whats going on? Here is a link to a fiddle showing what i mean:
http://jsfiddle.net/DannyW86/9YYNR/1/
here is a screen grab of how it appears in the browser, you can clearly see that the 3 articles with the icons are not centred beneath the text above
You can't center elements with margin: auto; if they are placed next to each other.
Try something like this: http://jsfiddle.net/leo/LzKTy/
(!!): Note the display: table;-attribute which i have addet to #boxcontent and the display: table-cell;-attribute i've addet to article.
So basically I am trying to figure out a super simple and clean way with html and css to have user avatars sit directly to the left of a comment on an article.
I am trying out float left on an image which works but then block elements seem to still go behind it even though text doesn't?
Any idea why?
See here for example: http://www.prxa.info/articles/rochard.1579#comments
The second comments quote box goes behind avatar but the text does not?
The images are just using this:
style="float: left; padding-right: 10px; clear: right;"
Tried with and without the clear - no difference.
add these rules
.qoute {
float: left;
width: 80%;
}
and put the rest of the comment in a div and clear the DIV for putting it in new Line
I have attached an example of what I am trying to achieve using html/css (if you cannot see the image it is: first name and surname, then second line is job description). I would like the all the text (both lines) to be forced justified (left and right) within a div but I am not sure if it is possible. I have tried a few things with no success. I would rather not use an image, so any idea would be greatly appreciated.
Browsers generally do a crap job at full justification. If you are a design company using this to promote yourself, I'd avoid it.
Also, it only works on paragraphs of text, not single lines.
You can try tweaking the CSS letter spacing to get the effect you're looking for.
Use text-align-last: justify:
.justified {
text-align: justify;
text-align-last: justify;
}
.justified:after {
content: ".";
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}
http://jsfiddle.net/gilly3/En4wt/
source
Since you only want to style the title, you can create specific styles for it. Try combining font-size with letter-spacing until you get the effect you want to achieve.
Text align: justified is for a different purpose, it's meant for paragraphs (or long blocks of text). If you don't have enough text to reach the end of the line, it doesn't work.