I'm using flexbox to build my page and I'm using the following to apply the same rules to all elements inside an article:
#article-wrapper > *
{
flex:1 100%;
padding:0px 20px 0px 20px;
box-sizing: border-box;
}
I then use media queries to change the layout but that's not the point of my problem.
Inside #article-wrapper, I have a couple of DIV elements containing text and images. With the CSS code above, everything gets a left & right padding of 20 px. It's fine but I'd like image to have a padding of 0 px.
Negative padding is not possible and applying the padding locally on each element would force me to wrap all text in or
I thought of doing this:
#article-wrapper > *
{
flex:1 100%;
box-sizing: border-box;
}
#article-wrapper:not(img) > *
{
padding:0px 20px 0px 20px;
}
But with this, images remain unaffected.
Do you see any way of creating an exception for one type of element ? (images in this case)
Here is an example: https://wp.laurentwillen.be/circuits/circuit-ecosse/chateau-culzean-et-drumlanring-dumfries-galloway
Thanks
Like so
#article-wrapper > *:not(img) {
padding:0px 20px 0px 20px;
}
Related
I wrote in parenthesis and in all caps, the things I am confused about in my homework instructions.
This is my homework instructions:
On the first line of your "main.css" file create a comment that reads "general". Under that comment write the following
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
Add the css line from the templates page (on the course website) that groups some selectors and sets them all to "display block".
Skip one line and write a comment that reads "wrapper". Under that comment write a css id of "wrapper" and add the following properties.
Give it a width of 1024px
Give it a margin property with the values of 0 and auto (margin: 0 auto centers the page on the browser window. We have to have a width to allow it to show that it is centered.)
Skip one line and write a comment that reads "main".
Put a border of 1px solid #000 around the left, right bottom of the main element.
(NOT SURE IF I DID THIS PORTION CORRECTLY ^)
Add a padding of 10px to the main element. We add a padding so the content will not butt up against the edge of the main element
Using a contextual selector select all the images within the divisional element with the id of "images" and set each image height to 90px, width to 120px and a margin of 20px around the image. We are using CSS to resize our images.
(NOT SURE HOW TO WRITE A CONTEXTUAL SELECTOR TO SELECT ALL THE IMAGES WITH THE DIV ELEMENT WITH THE ID of "images")
This is what I have created but am not sure if it is correct:
/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }
div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>
The wording in your homework is incredibly poor, but what I believe you're looking for is to target all elements with an ID of images contained within a DIV. This would be:
div #images {
height: 90px;
width: 120px;
margin: 20px;
}
This will target any element with the ID of images inside any DIV, even if there is an element in between them (such as <div><span><img id="images"></span></div>). Note that you can also target direct descendants with >. div > #images will target <div><img id="images"></div>, but not <div><span><img id="images"></span></div>.
Keep in mind that having multiple elements on the page with the same ID is invalid markup, and the page will fail to validate correctly. The only situation where this would be valid is if your teacher is meaning to have a single element called #images on multiple different pages. You should use classes for targeting multiple elements on the same page. It's possible your teacher meant for you to use a class, which would be div .images.
As for your border, you have done it correctly, though note that you can set all four borders at once with the shorthand border:
main {
border: solid 1px #000;
padding: 10px;
}
Also, keep in mind that your second line should also be in a comment, or else it will throw a syntax error:
/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/
Hope this helps! :)
Hi i will try to answer this the best that i can, i am only a programming student so this is my best shot :)
First of all, id's has to be unique you cant have two identical id's on the same page.
If you have etc
<div id="test"></div>
<div id="test"></div>
And you try to style it like #test{background-color: red} only the last div will actually have a red background.
But basically this is what he wants:
/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}
Examples of contextual selector
I hope this will help you with your programming journey! :)
I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.
Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/
The important section is the:
<div id="inner" class="span10">
...
</div>
Please have a look at the attached screenshot, especially the yellow marked area:
I have the following question / problem:
How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?
I would give the parent container a padding and also apply box-sizing: border-box to it.
Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/
#main {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
background: #FFF;
border-radius: 4px;
}
.span10 {
padding-right: 10px;
box-sizing: border-box;
}
You could try using
#main {padding-right:5px}
But maybe that makes #main wider than you'd like.
In that case, you could use
#main > div { width:98%; }
#main > .navbar {width:100%; }
to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.
I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:
.contents {
...
margin: 10px 10px 10px 10px;
}
Example: http://jsfiddle.net/LCTeU/
How do I fix this?
Edit:
I've also tried padding the container instead, and that just expands the container to maximum size (why?):
.container {
...
padding: 10px 10px 10px 10px;
}
Use overflow:auto on any of the elements that are involved with the collapse. For example:
article {
overflow:auto;
}
jsFiddle example
This answer is based off of the fiddle you provided.
I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:
article {
//display: block;
clear: both;
padding: 10px;
}
This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.
.rounded-box {
background-color: #959392;
border-radius: 15px;
margin: 10px 0px;
}
Working Example http://jsfiddle.net/LCTeU/4/
So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.
I found a fix that does not require a padding, and does not require changing the overflow of the container element:
article:after {
content: "";
display: block;
overflow: auto;
}
The idea being that we add another element at the bottom that disrupts the collapsing margin, without affecting the height or padding.
As per the fix that Erik Rothoff suggested, which does not seem to work in Safari, first I tried the following:
article:after {
content: "";
display: inline-block;
overflow: auto;
}
This does work in Safari but takes up space which I could not get rid off, messing up the grid so much that I would need to change margins.
Then I decided to combine the two by doing the following:
article:after {
content: "";
display: block;
padding-top: 1px;
margin-top: -1px;
}
This works in Safari, has an acceptable height of 1px which is negated by the negative margin top.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I'm using a large background in <body> tag and I want to make a container div with a width of 960px.
I want the container div to be positioned 15px down from the top, I guess i have to use position:absolute.
My dilemma is; the rest of the div's inside the container have to contain the same position or i could continue this like an normal 960px wide website?
Sorry for my bad english.
Please help me!
This should give your container a 960px width and center it with a 10px top (and bottom!) margin.
#container {
width: 960 px; /* set width for container */
margin: 10px auto; /* 10px top and bottom, center screen */
}
You don't have to use absolute positioning. A simple
body {margin: 0; padding: 0}
#container {width: 960px; margin: 15px 0 0;} /* or margin: 15px auto 0 */ if you want it centered
will do :)
You do not need to use position:absolute; what that does is puts a div in a specific place on the page irrleevant of broswer window size which isn't what you want in this instance,
What you need is simply a margin-top:$$px;
If you are using an id use the # identifier:
#container {
margin-top:15px;
width:960px;
}
If you are using a class use the . identifier:
.container {
margin-top:15px;
width:960px;
{
All divs within this tag can be written and position as they normally would, no extra padding or margins necessary.