I'm trying to update the logo for my farm (manayunkfarm.org) and I need to center the logo. I'm wondering if someone could help me understand how I need to do this.
within the style.css under .logo there is this:
.logo {
position: absolute;
left: 50%;
width: 500px;
height: auto;
margin-left: -4.1665em; }
given this info, I'm not sure if you can help me but let me know what else I need to share with you.
Thanks
That or CSS that will center any div/object as long as it has a width set.
.logo {
position: absolute;
left: 0px;
right: 0px;
width: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
}
All you have to do is add this property
text-align: center;
Related
I design fixed header and main box, but the problem is when I scroll the page the box come over the header since the header is fixed. why it is coming like that? How to solve this position: fixed stacking order issue?
header{
background-color: black;
width:100%;
height: 50px;
position: fixed;
}
.mainbox{
width: 800px;
height: 100%;
background-color: white;
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%;
margin-left: -500px;
}
You should increase the z-index property in your header
header {
background-color: black;
width:100%;
height: 50px;
position: fixed;
z-index: 999;
}
What is the use of z-index?
It specifies the stack order of an element. Element which have higher stack order is always in front of the element with lower stack. For example, if your header has z-index: 10 and your mainbox has z-index: 9, then your header is stacked in front of your mainbox.
You should add z index property for header in css i.e. z-index:2
z-index property can do what you want from css.
I have just commented margin-left from css, to showcase you result. You can keep it as it is in your code.
Run below code. I hope it will solve your CSS issue.
header{
background-color: black;
width:100%;
height: 50px;
position: fixed;
z-index:20;
color: white;
}
.mainbox{
width: 800px;
height: 100%;
background-color: green;
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%;
/**margin-left: -500px;*/
z-index:5;
}
<html>
<header class="header">
This header
</header>
<div class="mainbox">
Here will be list of questions by php
</div>
</html>
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I'm using Laravel-snappy and am trying to absolutely position 6 columns so that 3 print on each page..
View
...
body {
position: relative;
}
.col1-1 {
text-align: right;
background-color: #00dd00;
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 11in;
}
.col1-2 {
text-align: right;
position: absolute;
background-color: #1c94c4;
top: 0px;
left: 270px;
width: 250px;
height: 11in;
}
.col1-3 {
text-align: right;
background-color: #46b8da;
position: absolute;
top: 0px;
left: 540px;
width: 250px;
height: 11in;
}
.col2-1 {
text-align: right;
background-color: #dd0100;
position: absolute;
top: 11in;
left: 0px;
width: 250px;
height: 11in;
}
.col2-2 {
text-align: right;
position: absolute;
background-color: #c4770b;
top: 11in;
left: 270px;
width: 250px;
height: 11in;
}
.col2-3 {
text-align: right;
background-color: #da0073;
position: absolute;
top: 11in;
left: 540px;
width: 250px;
height: 11in;
}
</style>
</head>
<body>
<div class="col1-1"></div>
<div class="col1-2"></div>
<div class="col1-3"></div>
<div class="col2-1"></div>
<div class="col2-2"></div>
<div class="col2-3"></div>
....
Controller
return $pdf->stream('page.pdf');
return view('page');
the problem is that the columns come up short, so the 2nd row start on the 1st page...
I have the pagesize set to letter
'pdf' => array(
'enabled' => true,
'binary' => 'C:\wkhtmltopdf\bin\wkhtmltopdf',
'timeout' => false,
'options' => array('page-size'=>'letter'),
So I'm not really sure what to do next...
I feel like it's a scaling issue?
If I don't use Snappy, and just display the page on the screen and print the screen as a PDF, the results are much better (just a few pixels off), but of course I need the page returned as a PDF.
Snappy uses wkhtmltopdf, which in turn uses Webkit to render the HTML. (Might help you to find more info if my suggestions can't help you as your issue is probably not specifically related to Snappy.)
I think you could solve your issue by preventing the page from breaking inside the columns.. To do that you can use the following CSS on each of the columns:
.col{
page-break-inside: avoid;
}
You might also try wrapping the 3 columns in a div and applying that css on the wrapper div.
You can also try page-break-after: avoid or page-break-before: avoidon the columns or by creating an empty div between the sets of columns and styling it with `page-break-after: always'.
Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:
.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ
Can anyone help me because I want the content in the center of the webpage and the map to act as the background.
Thanks.
Try adjusting the top and left instead of margin when an item is set to an absolute position:
.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
Hope that helps? Also might want to set a higher z-index value as I have done above.
If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.
You can try this instead by giving your content an absolute width and offsetting the left property:
.content{
width: 500px;
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 50%;
height: auto;
margin: auto;
margin-left: -250px; /* half the value of the width */
}
Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.
Mikey.
Did you try putting the content on top of the map?
#map {
z-index:1;
}
.content{
z-index:100;
}
This is because your using position: absolute; and that is not working togetter with margin:auto;.
Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.
Example
<div> //This div has position:absolute; and the width of the Google maps chart.
<div> //This div has margin:0 auto;
Content here
</div>
</div>