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.
Related
For whatever reason, I can't get this problem figured out; I'm trying to center my post's date and author contents on my mobile page. I can get the corresponding post title to center itself fine with "text-align: center" (which I'm not using currently, until the other issue is sorted out).
I've tried using margin 0 auto, and text-align, but can't seem to make things work. For anyone wondering, the !important tag seems to have no bearing either - I'd prefer to leave that out. Also, I have been utilizing the appropriate media queries.
My site is: www.tylercharboneauprofessional.com/international-pulse/net-neutrality
Here is an HTML-structure snapshot:
This should work for you:
article header {
text-align: center;
}
I have been trying to display a sequence of text/image/text in the same line in my HTML document and after hours I still haven't deciphered the problem. As of right now my html page looks like:Webpage
I wanted the page to have text/image/text on the same line though as I stated. I tried making the div they are in float: left; and also display: inline; . Furthermore, I also tried display: inline-block; but that still didn't work.
Here is the css code I am working with: css code
If anyone could give me some insight that would be very helpful, thanks.
Basically you need to set display:inline-block; to each element you want to appear inline (h2,div, and any others).
Lastly, you want to set the percentage width of each element such that the total is 99% or less (TBH I can't tell you why this is, it's just been my experience).
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;
I am currently just trying to create a responsive mock up with the following code and it looks fine as a single column in the mobile layout but as soon as it reaches a resolution large enough for 2 or 3 columns the images and button in the top right corner disappear unless they are still in the 1st column. Any help would be greatly appreciated. I have a fiddle here: http://jsfiddle.net/d6rs4abw/1/
This is the main area that I am fighting with but I could be wrong somewhere else that is effecting my overall css
Thank you in advance for any help you can offer, This is one of the first layouts Ive ever done so take it easy on me
ul#products {
margin:1em 0;
padding-left:1em;
-webkit-column-count:auto;
-webkit-column-gap:2.5em;
-webkit-column-width: 310px;
}
Take a look at animation properties, for instance -webkit-backface-visibility: hidden; set for .flip and face: looks like this property causes invisibility.
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article