just wanted to know how i can change my navigation menu to have an indented effect. Like 1px of one light colour, and 1 px of darker colour.
Also does anybody know why i couldn't auto center the content in white, i tried margin:0 auto; but had to code in a weird workaround.
soz, site is http://digitalgenesis.com.au/sites/1
Cheers
Daz
You could probably use border-style: inset; for the border effect you want, there's no need for nested block trickery or anything like that.
Your #infowrap element won't auto-center with a simple margin: 0 auto; because it is a block element and hence its default width is the width of its parent, this causes the auto left and right margins to come out as zero. The margin: 0 auto; will work if you wrap the insides in a block and give it an explicit width (for example: http://jsfiddle.net/ambiguous/aMemg/).
http://jsfiddle.net/jkmwy/
you can style the border left/right/top/bottom to create a bevel effect.
html
<div id="a"><div id="b">blah</div></div>
css
#b {
height: 200px;
text-align: center;
background-color: white;
border: 1px solid red;
line-height: 200px;
}
#a {
border: 1px solid yellow;
width: 300px;
}
body {
background-color: black;
}
Related
I'm facing a weird problem when using float-left property to show some divs inside a container. The last one is cutting the right side edge for outline or box-shadow property when applied. I'm showing the problem on the pic below:
if I apply the outline in any other div, it works fine (see image below). This is happening only for the last one showed.
I'm using following class for each container (VOL. 1, VOL. 2, VOL. 3):
.container_volume {
float: left;
width: 150px; height: 23vh;
border: 1px solid #fff;
margin: 10px 0 0 10px;
background: #EDFF9E;
}
And this is the outline code that is applied when user select one of the divs:
outline: 5px solid #FF0004
Does anyone knows why this happens?
EDIT 1
To be more specific, here goes the simple html I'm using:
<div class="content_desc_volumes scrollbar-dynamic">
<div class="container_volume" id="container_volume_1"></div>
<div class="container_volume" id="container_volume_2"></div>
<div class="container_volume" id="container_volume_3"></div>
</div>
EDIT 2
Here goes the CSS for the parent container (content_desc_volumes):
.content_desc_volumes {
float: left; width: 100%;
height: 26.3vh;
overflow: hidden; overflow-Y: scroll;
border-top: 1px solid #000;
background: url(../img/bgConf2.jpg) #fff;
box-shadow: inset 0 0 40px #000
}
PS: scrollbar-dynamic is a class for a jQuery plugin I'm using. I've already tried to get rid of this class, but doesn't make any difference.
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
http://codepen.io/leongaban/pen/qEzaNr
I have 2 columns, the first column on top section.tags-panel Is the column I'm trying to fix. I don't want the tag's to float like that until something else happens.
However I also need the default column width to be 240px. In order for me to create that pill button style feel, I had to put in float:left.
^ Thus this creates a problem where I have the pill tags looking correct, but floating wrapping when they should be lined up in a single column.
The column below section.tags-panel2 is the look I'm trying to achieve, however I'm cheating because I'm shrinking the width of the panel. The text in the tag pills should never wordwrap too.
How would you achieve this without it looking like:
CSS:
section.tags-panel {
width: 240px;
height: 100%;
background: #f7f7f7;
border: 1px solid #ccc;
overflow: auto;
}
section.tags-panel li { margin-right: 10px; }
.tag {
overflow: hidden;
float: left;
position: relative;
margin: 0 10px 10px 0;
padding: 5px 10px;
width: auto;
border: 1px solid gray;
background: #ccc;
}
Perhaps you could add
clear: both;
to the tags? This should separate them and keep them in a vertical line as no floating elements are allowed on the left or the right side of the div you specify to have the clear attached to.
There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.