I am viewing p-ng.com in firefox, when it is viewed with the bookmark sidebar, the logo is not centred.
Example with sidebar:
When I view the page without the bookmark sidebar, it looks like this.
Example without sidebar:
Even so, the logo doesn't seem to stay centered.
Thanks for any suggestions.
CSS
.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
margin:0;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat top center;
margin-left: 625px;
margin-top: -95px;
width: 87px;
height: 87px;
width: 100%;
position: absolute;
background:#E5E5E5;
overflow: auto;
}
You have so many unnecessary declarations, the reason it's not centering to the viewport is because you have position: absolute and a bunch of unneeded margins.
Change your css to this.
CSS
.header-image .site-title > a {
background-position: url(images/logo.png) no-repeat top center;
margin: 0 auto;
width: 87px;
height: 87px;
background: #E5E5E5;
}
I don't understand why you have all the different margins, widths and then finally a position: absolute on top of that, but here's an easy way to center your logo :
.header-image .site-title > a {
position: absolute;
width: 87px;
height: 87px;
left: 50%;
transform: translateX(-50%);
background:#E5E5E5;
}
If it needs to be vertically centered within its container as well, you can add this :
.header-image .site-title > a{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For the browser support of the transformproperty (and to see which vendor prefixes you need), refer to this : http://caniuse.com/#search=transform
Position your logo relative to a container of width: 100%, then you can set margin: 0 auto - this way you can also lose the margin-left property.
Example:
.parentContainer {
width: 100%;
}
.logo {
margin:0 auto;
position: relative
}
Related
I want a circle with dynamic content. I am using a background image (SVG) and scale it so it is alway behind the content. It almost works. The background gets scaled but the overflow is not visible. So the left and right overflow, or the top and bottom depending on the screen width, are not visible.
.icwrap {
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
display: flex;
transform: translate(-50%, -50%);}
.iccont {
text-align: center;
position: relative;
display: table-cell;
overflow: visible;
width: 45vw;
padding: 7.5vw;
height: auto;
color: #FFF;}
.iccont h1 {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 0px;
line-height: 1.5em;}
.iccont p {
line-height: 1.5em;}
.icwrap:before {
content: '';
width: 100%;
height: 100%;
min-height: 100%;
display: block;
position: absolute;
left: 50%;
top: 50%;
overflow: visible;
transform: translate(-50%, -50%);
background-position: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg);
background-repeat: no-repeat;
background-size: cover;}
See my code like described above:
https://jsfiddle.net/g471tLzf/
I like the behavior. Is there a solution to display the overflow?
The rectangle that can be inscribed in a circle has a maximum area that is a square having radius/sqrt(2) width.
Check the video if interested in underlying maths.
https://www.youtube.com/watch?v=wNMK92GVTO8.
So you can't solve this problem in general unless your content fits in every case inside that box.
So I have an image on my website and I want to perfectly center it. I have tried many things but none have worked.
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
}
<img src="images/astronaut.png">
The simplest way to centre an image horizontally is with:
img {
display: block;
margin-right: auto;
margin-left: auto;
}
Like this?
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<img src="images/astronaut.png">
The centering codes are the left, top, and especially the transform
Have a look at the following links for further help, hope it helps.
https://www.w3.org/Style/Examples/007/center
https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
html {
width: 100%;
height: 100%;
background:url(http://tse4.mm.bing.net/th?id=OIP.IX1fAIIUJ82DtdfgR2tSnADhEs&w=207&h=276&c=8&qlt=90&o=4&dpr=2&pid=1.7) center center no-repeat;
}
Setting the left and right margin to auto will center the image horizontally within it's parent if your position isn't set or is set to relative.
So you could use:
img {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 40%;
z-index: -5
}
If your position needs to be set to absolute, you can use CSS3's viewport sizing to center your image. This would place the image in the exact center of the page; so if you want to center the image within a sidebar, for example, don't use this method. You'll need to set a width for your image and then align it using the "left" property. That would look like this:
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
width: 500px;
left: calc( 50vw - 250px );
}
The viewport is always 100vw wide, so setting the left property to 50vw - 1/2 of the image's width will center it on the page.
You can also use jQuery to similarly calculate the proper alignment and position the element.
You can put the image in a div and make it 100% of the screen in width and height.
Then add text-align:center; to center it horizontally.
Then set the line height to 100% and then add vertical-align: middle; to the image to center it vertically.
body{
background-color: black;
}
.CenterImage img {
height: 40%;
z-index: -5;
vertical-align: middle;
}
.CenterImage{
width:100vw;
height:100vh;
line-height: 100vh;
text-align:center;
}
<div class="CenterImage"><img src="images/astronaut.png"></div>
body{
background-color: black;
}
img {
position: absolute;
text-align: center;
height: 40%;
top: 50%;
left: 50%;
z-index: -5
}
<img src="images/astronaut.png">
I was practising in css paralax and got a problem: between background image and a next div there is a white gap, you can just change the width of a viewport and scroll down to see it.
So, my question is: Why it's happening and what I should do to remove it?
A screenshot and Link on JSFiddle or
css code:
.car {
position: relative;
width: 100%;
height: 600px;
background: url(http://i63.tinypic.com/14viwxk.png) no-repeat;
background-position: top left;
background-size: contain;
padding-top: 100px;
padding-bottom: 0;
overflow: hidden;
background-attachment: fixed;
}
.car h1 {
line-height: 1.2;
}
.car figure {
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
color: white;
}
figure p {
margin-bottom: 20px;
}
Your image is simply too small. Change background-size to cover and see what you get
What have say #Hunter it's correct, or you can change the height: 600px; to height: 300px; or use other pictures with height: 600px
I'm trying to move into responsive web design and I'm having a bit of an issue with my CSS images moving up and down when the browser width changes. Right now I'm working on the nav bar and I'd simply like my menu buttons to stay at the same height within the nav bar as the browser resizes in width, until it at least hits the next #media query and pulls different CSS attributes.
CSS Code:
html, body
{
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
}
img{
max-width: 100%
}
ul {list-style-type: none; }
li {display: inline;}
#wrapper {
padding: 0;
width: 100%;
height: 100%;
/* Large Resolutions Desktops */
#media only screen and (min-width: 1600px) {
/* Main Navigation Styling */
#main_nav{
height: 200px;
width: 100%;
background: #1D5799;
}
li.hom a {
margin-top: .5%;
display: inline-block;
width: 349px;
height: 188px;
background-image: url('images/menu-desktop/logo-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.ab a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 20%;
width: 157px;
height: 38px;
background-image: url('images/menu-desktop/about-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.iss a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 30%;
width: 152px;
height: 38px;
background-image: url('images/menu-desktop/iss-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
li.new a{
margin-left: 2%;
margin-top: 8%;
display: inline-block;
left: 40%;
width: 133px;
height: 38px;
background-image: url('images/menu-desktop/news-desk.png');
background-repeat: no-repeat;
background-position:center;
text-indent:-9999999px;
overflow:hidden;
}
.menu-main-menu-nav-container{
display: block;
height: 100%;
width: 100%;
}
#mobile_logo{
display:none;
}
/* Body Styling */
#main_content{overflow:auto;}
/*Foot Styling */
#f_container {
position: relative;
bottom:0;
width: 100%;
height: 200px;
background: #1D5799;
z-index: 1;
}
}
Then here are a few images showing what I mean:
Full size, positioned correctly:
http://puu.sh/fX3BV/0551e774ce.jpg
Browser width decreased, the menu buttons start moving upwards:
http://puu.sh/fX3It/006ff219a5.jpg
The menu buttons will continue to move upwards until it hits the next media query and "resets" to that browser's resolution. I'd post a live link but it's still only a local build right now. If you'd prefer a OBS video to show the effect I can do that.
Thanks
Go position: absolute and top: 40px(approximately), then use the left & right properties to set the px amounts for the rest of your nav buttons.
The items are moving up due the % margin-top value you have put. try using px instead from margin-top. From my experience you only really need to use % values for horizontal positioning
I'm placing a big image on top of a couple div layers with relative positioning. I'm also using top: -170px; to pull the image up to exactly where I need it to be. It works perfectly in Firefox, but in IE it won't adjust the position of the blue bar beneath it to account for the negative top positioning.
If I don't make sense, you can have a look at the live development site:
http://www.suncastmedia.com/clients/ezbook/
You'll see what I mean if you look in both firefox and IE. Here is my CSS for these specific divs as well.
#red-box {
width: 100%;
height: 343px;
background: url('../images/bg-red.png') top left repeat-x;
text-align: left;
}
#red-box-text {
position: relative;
left: 70px;
top: 45px;
font-size: 18px;
font-weight: bold;
color: #fff;
font-family: helvetica;
width: 451px;
}
#spacer {
width: 100%;
height: 8px;
}
#blue-box {
width: 100%;
height: 29px;
background: url('../images/bg-blue.png') top left repeat-x;
}
#pic-globe {
position: relative;
top: -170px;
left: 52%;
background: url('../images/pic-globe.png') top left no-repeat;
width: 506px;
height: 471px;
}
You could switch #pic-globe and #red-box-text around, then add float: right; to #pic-globe. Generally, if you are using huge, negative margins, there might be an easier way to do it.