I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
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'm new to css and stuck and can't figure out what I am doing wrong. But I would like to have the foot show as three columns. If you look at the image layout and notice the footer has three columns well that's the i'm trying to achieve. Also the footer dotted lines show past the layout.
Here is my layout: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Here is the working site: http://www.gdisinc.com/barker/default.php#
Could you tell me what I have to do to fix it. Let me know if you have any questions?
The reason why the third <ul> goes down is because you have an extra 1px of border (border-right: 1px dotted #FFFFFF;).
The way you did it was having a 900px container and divide it into 3 columns. That's correct.
But once you added an extra border-right: 1px dotted #FFFFFF;, the column width become 301px (300px width + 1px border = 301px).
To solve this, either you make change the container size into 903px. Or you reduce the width size into 299px.
The other problem about
the footer dotted lines show past the layout.
Be careful with padding. When you add padding inside a div. It is counted as extra width.
Some part of your CSS for <ul> is:
width:902px;
padding:20px;
The total width is 902px (width) + 20px (left padding) + 20px (right padding) = **942px**
To fix this, you change the padding at your <ul> by using padding:20px 0px;. The first value represents top & bottom padding, the second value represents left & right padding.
2 solutions
increase width of the content
.content {
width: 903px;
}
or remove border of the last ul in content
.content ul:last-child {
border-right: 0;
}
add this css
.content {
padding:20px 0;
}
#footer ul {
margin: 0 0 0 20px;
width: 275px;
height:120px;
}
also add a class to last ul and add this
.last {
border:none;
}
better do this as suggested by Emrah
.content ul:last-child {
border-right: 0;
}
Your columns don't fit enough in a parent. Set style="border:none;" for the last column.
As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
I am building a navigation where, despite my fiddling with padding, I cannot create equal distances between my sub menu's. It's a little hard to describe so I have created a jsfiddle here: http://jsfiddle.net/kCXrX/
If someone has a sec could you let me know why, when you hover over a element the distance between the line items are not the same - there is a greater distance on the left than on the right
Any guidance appreciated!
I've forked your fiddle here: http://jsfiddle.net/tLzST/1/
Your HTML was invalid, ULs can't be direct children of ULs, so I've put your .submenu lists within LIs. One or two style tweaks, too.
in ul.subnav change your padding to this:padding: 0 5px 10px 1px;
if you did a ctrl-a on your table, you will see your border-right line actually has what seems to be a 3 pixel padding automatically added to itself. If you take that padding into account your code actually works fine.
in any case heres the new jsfiddle: http://jsfiddle.net/kCXrX/5/
I've added ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;} and now it looks beter to me.
The extra padding appear just because you are using inline-block. try to remove this property (display:inline-block) and replace it with float:left.
now, it's time to tweak the .navigation so it force to containt the subnav (floating issue) by adding overflow:hidden;.
i have edit your fiddle, take a look at it. http://jsfiddle.net/kCXrX/
if orange hover left & right white spacing difference is the issue, check following code.
ul.subnav {
border-right: solid 1px;
display: inline-block;
height: 80px;
padding: 0 5px 10px 1px;
vertical-align: top;
width: 116px;
}
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.