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.
Related
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;
}
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 have a navigation bar with 4 links floated.
While width of each one is 25% of total width of NAV, height is not fixed because text of a link could be longer than others and span across 2 rows, like in this example.
#first-level-navigation .mega-link {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #eaeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #cccccc;
padding: 0;
text-transform: uppercase;
width: 25%;
}
#first-level-navigation .mega-link a {
color: #00643c;
display: inline-block;
padding: 10px;
text-align: center;
text-decoration: none;
width: 100%;
}
I would like that height of smaller links will extend to height of taller one in case like mine, in which last link span on 2 rows if window is smaller enough. How to obtain it, withous forcing height in px? I tried with height:100% but it was unuseful
You can use display:table/table-cell:
#first-level-navigation{
display:table;
}
.mega-link{
display:table-cell;
vertical-align:middle;
}
JSFiddle
Aslo, you have to add browser prefixes for box-sizing: border-box - here's a good article about it by Paul Irish.
With jQuery(in Coffeescript):
if $('html').length > 0
link = $('.mega-link')
# Determine heights
link_height = link.height()
# Applys heights
link.css "height", link_height
# when window resizes, calculate and apply again
$(window).on 'resize', ->
# re-determine height
link_height = link.height()
# Apply heights
link.css "height", link_height
After few years, new modern CSS techniques could be used to solve this issue, using Flexbox Layout.
Starting from #Vucko's jsFiddle (proposed in its answer), I slightly modified it to use Flexbox in the following way:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
}
This code solve "equal heights" issue but to mantain also centered vertical alignment, is necessary to make flex also each .mega-link, so the complete code becomes the following:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
display:flex;
align-items:center;
}
Please, note also that Flexbox allows to avoid specific declaration of fixed width (so width:25%; can be removed, replaced in its function by flex:1;), so becomes easier change number of .mega-link elements with auto adaptation of each one.
I have a main div which contains a table :
<div id="main_container"><table>
you can see the full code in:
http://jsfiddle.net/tF62u/
As you can see, the child table is wider than the div but it (the div) doesn't adjust accordingly.
Which definition am I missing here?
Add display:inline-block to your div's CSS rules:
#main_container {
font-size: 9px;
border: solid 3px #faa;
background-color: rgba(245, 255, 10, 0.12);
display: inline-block;
}
jsFiddle example
Add display:table; to your #main_container
http://jsfiddle.net/tF62u/4/
One possibility is to make the div float left. Floating elements are as wide as their contents, rather than as wide as the window.
#main_container {
font-size: 9px;
border: solid 3px gray;
background-color: rgba(245, 255, 10, 0.12);
float:left;
}
Updated fiddle.
Also make sure to clear this float afterwards, or other content that follows will be displayed to the right of the div if the window is wider than the table.
By the way, this also goes for display:inline-block; if you do that you will need to make sure that the div is followed by a block element.
Another solution, for this particular fiddle, would be to remove the div entirely and apply all the styles to the table. Of course that would only work if the table were all the content of the div...
Just make your #main_container have a display of table-cell:
#main_container {
display: table-cell;
}
DEMO
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