The result on chrome and ie10 are work, but not work on firefox.
I would like to add the shadow background at the bottom of div
please take a look on this
http://jsfiddle.net/yokosatan/mv83a/
Here is the code of HTML
<div class="box">
<div class="logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
</div>
<div class="name">Name</div>
</div>
And CSS code
.box
{
text-align:center;
width:105px;
}
.name
{
font-size:11pt;
margin-top:8px;
text-transform:uppercase;
}
.logo
{
width:105px;
height:105px;
background:white;
display: table-cell;
vertical-align: middle;
position:relative;
}
.logo:after
{
content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
bottom:-15px;
display:block;
height:15px;
}
.logo img
{
margin:0 auto;
max-width:85%;
width:85%;
max-height:85%;
}
Question is how to do the same result as chrome or ie that display.
Additional, it could be other solution that give the same result for all web browsers.
Thank you
Update: I think the cause is that I make display
display:table-cell;
I change to be display block and it's work, but I want to make logo to be center vertically.
What should I do?
Instead of using content: url(); use content: ' '; and use background-image and it should work for you
Demo
.logo:after {
content:' ';
height: 15px;
width: 100px;
background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
top: 110px;
display:block;
background-repeat: no-repeat;
}
Edit:
As you had issue using display: table-cell;, you can use display: block; instead and use position: absolute; for the img tag and use top and left with custom values to set the image vertically middle.
Demo
use content as ""
and add background
.logo:after
{
background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
}
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
Given HTML:
<div id="title">Text</div>
<div class="circlecontainer">
<div class="circle">Hello</div>
</div>
And CSS:
div {
display: inline-block;
}
.circlecontainer {
background: #E0E;
text-align:center;
line-height:200px;
width:200px;
height:200px;
}
.circle {
width:100px;
height:100px;
border-radius: 50px;
font-size:20px;
color:#fff;
background:#000
}
.circle:hover {
width:200px;
height:200px;
border-radius: 100px;
}
JSFiddle: http://jsfiddle.net/S329D/4/
I would like the black circle to be vertically centered when not hovered over.
But when I set vertical-align:middle, the text looks screwed up:
http://jsfiddle.net/S329D/5/
Why does this happen?
It's because the line-height is still 200px. Try this:
div {
display: inline-block;
}
.circlecontainer {
background: #E0E;
text-align:center;
line-height:200px;
width:200px;
height:200px;
}
.circle {
line-height: 100px;
position: relative;
vertical-align: middle;
width:100px;
height:100px;
border-radius: 50px;
font-size:20px;
color:#fff;
background:#000
}
.circle:hover {
width:200px;
line-height: 200px;
height:200px;
border-radius: 100px;
}
http://jsfiddle.net/S329D/7/
If you remove the border-radius the box is not centered, so the circle is not centered too
You need to work with the margin-top. I've edited your fiddle
Simply add a span tag inside the circle div element with style "vertical-align: middle;" and remove the "vertical-align: middle;" of the circle class.
<div class="circle">
<span style=" vertical-align: middle;">Hello</span>
</div>
The problem is because of the height of the circle class change also affect the text element. With the span, it does not.
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
I have an image (base.jpg) which has the following css:
.thumb-image {
padding: 0;
border: none;
margin: 0 auto 5px;
display: block;
width: 205px;
background: #EEE;
color: #8A8989;
border-image: initial;}
<img class="thumb-image" src="base.jpg" alt="" onerror="this.src='thumb.png'">
The image height is variable. Is there anyway I can overlay another image (overlay.png which is the red image) on top of base.jpg on the bottom right cornerusing css by adding another class declaration to the above css?
Many thanks
You need a wrapper div and then absolute position the corner image.
<div id="wrap">
<img src="img/big.jpg" class="big" alt=""/>
<img src="img/corner.jpg" class="corner" alt=""/>
</div>
#wrap { position: relative; }
.big, .corner { display: block; }
.corner { position: absolute; right: 0; bottom: 0; }
There's not much you can do with just .thumb-image. If you modify the HTML somewhat, you can accomplish this fairly easily. I've put up an example here: http://jsfiddle.net/imsky/AsUuh/
This works IE8+ (with doctype), and across all other modern browsers, by using :before and generated content. You can convert it to use no modern features, but that would mean including an extra DIV inside each container. As an aside, :before doesn't work on IMG tags, so this is as minimal of markup as possible.
HTML:
<div class="thumb-container">
<div class="thumb-image">
<img src="http://placekitten.com/205/300">
</div>
</div>
CSS:
.thumb-image {
margin:0 auto 5px;
width:205px;
background:#EEE;
color:#8A8989;
border-image:initial;
position:relative;
z-index:0
}
.thumb-image img {
border:0;
display:block;
width:100%
}
.thumb-container {
position:relative
}
.thumb-image:before {
content:"";
display:block;
position:absolute;
width:100px;
height:100px;
bottom:0px;
right:0px;
z-index:1;
background:url(http://placekitten.com/100)
}