So, I have an error. I was wondering if someone recognizes It.
div.top {
border-top: 100%;
background-color: black;
height: 50px;
width: 100%;
color: #333;
text-align: left;
line-height: 50px;
border: solid;
vertical-align: middle;
border-color: transparent;
border-width: 100%;
}
tried to fix the top left corner
Actually it is not easy to get like that, it looks like the parent element has a padding or maybe the child. I recommend you to start your projects using a normalize CSS code like this one:
https://necolas.github.io/normalize.css/
This normalization code will help you to "clear" a lot of the "weird" things that happens in our browsers.
UPDATE:
I did not see your code. Do not use with: 100% with border values because it will make your container "bigger" than 100%. Use display: block, and your border.
Related
I have a question regarding divs and floats. I have searched a lot but can't seem to find anything that will fix my problem/work.
I am making a website and have two in-line divs: a description and a hours box. They are both set under a slideshow div and all three are set inside an outline/container. I'm trying to make it work for multiple window sizes, but whenever the outline div hits the bottom of either the hour or the description divs, they seem to float outside.
I'm kind of bad at explaining things so you can just look at bit of code:
div#outline{
clear: both;
height: 100%;
min-height: 100%;
width: 1000px;
margin: 0 auto;
background-color: white;
border: 5px solid white;
box-shadow: 0px 0px 17px #000000;
}
div#slideshow{
width: 50%;
min-width:700px;
height: 530px;
position: relative;
margin:0 auto;
margin-top: 30px;
}
#description{
width: 600px;
position: relative;
float: left;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}
#hours{
position: relative;
border: 5px solid green;
background-image: url("#");
height: 270px;
width: 220px;
box-shadow: 0px 0px 17px #000000;
float: left;
margin-right: 5px;
margin-top: 50px;
}
The full thing can be seen here: http://jsfiddle.net/wfq0kg0L/
Any help is appreciated! Thanks!
Im not sure if I understand the problem but I think it may come from usingheight: 100%; from the html tag down. I dont recommend doing this at all. It can be very annoying. Be responsive only using width or using media queries to set a proper height.
Also you should use overflow:hidden;on the outline div to not showing content outside of its boundaries.
I'm not understanding your problem..Looks like everything is working fine to me..All I can guess is that you want the div#outline to not float outside of one of your div containers? I don't see it floating outside.
Here's a quick recommendation tho..You don't need to be calling div#outline just #outline will do just fine. Also why are you using all div id's? You can each div a class. IE..
HTML
<div class="outline">
<div class="slideshow"></div>
</div>
CSS
.slideshow{}
.outline{}
This will clean up your css.
Also Look into flex-box. It's much easier to do layout this way now and it's widely supported across browsers. No need to float anymore.
Why are't you using a simple grid framework that will def help you with this kind of thing.
I have a repo on github that you can learn about flex-box at.
Check it out. Hope this helps :)
Remove height:100% from .outline or make it min-height:100% instead of height:100%
After div id="hours" add
I want to style only the content area of a div having a padding to visualize its content boundary like the inner box in the dev-tools is colored by the web browser. I've tried many things but either the css recommendations are not yet implemented like or maybe I use it in the wrong way.
<div class="around">
<div class="div-with-padding outline-content">
stuff ...
</div>
</div>
.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }
I've added an outline to the div just for comparison. The position: relative below is needed because its child's max-height/width only fits to the matched div if its position is relative.
.outline-content {
outline: 1px solid red;
position: relative; /* in the original post I've used bootstrap instead */
}
I've found no way to do this within the original div so I've added a pseudo-element.
First try:
.outline-content::before {
content: '';
position: absolute;
width: max-content; height: max-content;
outline: 1px dotted blue;
}
I don't really understand how max-content works. I've tried also others mdn. Maybe it doesn't work because I've set position: absolute; to don't change the page itself.
Second try:
.outline-content::before {
content: '';
position: absolute;
width: calc(100% - 30px); height: calc(100% - 30px);
outline: 1px dotted blue;
}
The question is how to get parent's padding = 30px if it isn't always the same. I've tried much more but without success.
I know with jQuery this problem becomes easy. If anybody knows an answer using only css … I really like to know it. Please also correct mistakes in my code snippets (width: max-content; and the like).
Thanks!
(this post includes some adaptions to the comments)
The magic css-property is called "background-clip".
HTML
<div class="outer">
outer-content
<div class="inner">
inner-content
</div>
</div>
CSS
.outer {
display:inline-block;
background-color: red;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100px;
height: 100px;
padding: 10px;
background-clip: content-box;
-moz-background-clip: content-box;
background-color: green;
border: 1px solid black;
}
Example: http://jsfiddle.net/u2vyqdc6/2/
As you can see:
One surrounding div with some content and some padding so you can see better what's going on.
Inside is another div with content, padding and "background-clip: content-box".
"background-clip" works just like "(-moz-)border-box". It tells the browser how to handle the background-specific box-model.
And the best thing?
Browser-support is almost universal at 95%:
http://caniuse.com/#feat=background-img-opts
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I searched for this but I can't seem to find a similar case that had an answer to it. Sorry if it has been addressed previously.
I have a section of a html page that looks, on a basic level, like this:
<div id=wrap>
<div id=lb>
Content
</div>
<div id=rb>
Content
</div>
</div>
These basically break up my body into a left section (LB) and a right section (RB).
With corresponding CSS (Not showing a CSS Reset, but a generic one is in use as well; ... indicate other code is present but N/A):
#bwrap {
width: 100%;
height: 400px;
display:inline-table;
...
}
#lb {
width: 71.5%;
display: table-cell;
...
}
#rb {
width: 28.5%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
}
I started right to left and filled in content in #RB; everything was perfect. However as soon as I started working in #LB I noticed that all my content within #RB shifted down to line up with the bottom of #LB's content. Even though the content nor the DIV overlaps.
The specific content that did this was a google calendar embed into #LB.
Everything looks completely normal except the shift down in #RB.
Anyone know where I went wrong? I tried to mess with floats and absolute positioning but none of it had any effect, most of it actually made the situation worse.
Use this
vertical-align: top;
Live example http://jsfiddle.net/wfyVy/
It's jumping down because the extra padding and border you have defined to rb is adding to the overall width of the container, making it no longer 28.5%. Try this:
#lb {
width: 70%;
display: table-cell;
...
}
#rb {
width: 20%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
oveflow:hidden;
}
Update: if changing it to the css above is not enough, try adding a float: left to both ids above.
When you use paddings in elements with width % values, the paddings adds to the width value. Try reducing a little bit the width to get a correct proportion.
Don't use display: table-cell, it's ugly and doesn't work consistently on all browsers, You should be able to do fine with floats and widths.
Also using padding or margins on the same element as an element that has a width defined is not a good idea, again browser incompatibilities make it a nightmare to work with.
I suggest you do something like:
<div id="wrap">
<div id="lb">
content
</div>
<div id="rb">
<div id="rp">
more content
</div>
</div>
</div>
with css:
#wrap {
width: 100%;
height: 400px;
display: block;
...
}
#lb {
width: 71.5%;
display: inline; //not actually necessary
float: left;
...
}
#rb {
width: 28.5%;
display: inline; //again not necessary
float: right;
}
#rp{
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
padding: 30px 6px 7px 6px;
}
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;
}