I have the header structure of my page as
<header>
<div class="clouds"></div>
</header>
The clouds do not change by the change in width of the screen. I want to make them responsive. How can I do with CSS.
I currently use the following CSS Code.
header{
width:100%;
height:100%;
}
.clouds{
z-index: -98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
min-width: 960px;
}
You should not add the height and width, this should do it at a bare minimum
background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Use CSS media queries to do this.
http://css-tricks.com/css-media-queries/
Here is sample code for responsiveness:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100%;
border: 1px solid #555;
font: 14px Arial;
background-color:red;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: left;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ background : #FCC; -webkit-box-flex: 10;
}
.box > div:nth-child(2){ background : #CFC; -webkit-box-flex: 20;
}
.box > div:nth-child(3){ background : #CCF; -webkit-box-flex: 30;
}
.box > div:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>HTML5</div>
<div>CSS3</div>
<div>Javascript API for HTML5</div>
</div>
</body>
</html>
Demo: http://jsfiddle.net/TLnC3/
Your code is working fine for me.
Although you have some bad codes.
You dont have to
header{
width:100%;
height:100%;
}
if your going to make your .cloud 100% width, and the height is not necessary.
Maybe you thought it's not working because of the min-width. Which limits your .clouds minimum width. So if you are re-sizing it below your min-width. Your .clouds width doesn't change to your screen size.
And don't listen to the others who uses media query, for this basic responsiveness you don't have to use media query.
header{
width:100%;
height:100%;
}
.clouds{
z-index: 98;
position: absolute;
top:0px;
left: 0px;
width:100%;
background: url('../images/clouds.png') repeat-x;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100% !important;
height: 30%;
}
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 this HTML line here (its an echo from php)
echo "
<div class='rowItem'>
<div class='singleItem'>
<div class='itemImage' >
<img src= $arr3[$i] >
</div>
<div class='itemName'>$arr1[$i]</div>
<div class='itemPrice'><br> Php$arr2[$i]
<div class='orderButtonDiv'>
<a href='menu_burger.php'>ORDER</a>
</div>
</div>
</div>
</div>";
Here is the CSS I'm using
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
here picture of the result
as you can see i am not able to resize the image here is the css code. Aside from that it is also overlapping some text
here is the image without the picture without the image
How can i resize the image properly that it will follow the the height of single item and at the same time equate its width to its height
Thank you very much
In my experience, a div with
background:url([imagepath]);background-size:cover;
is the best solution, the css property:
object-fit: cover;
Can help if you want to preseve the img aproach, but is less backwards compatible.
As for the overlaping text, read the documentation for z-index css property.
You will need to apply the background-image as an inline style. You can then add background-size: cover; onto .singleItem in css to control the background image size.
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
background-size: cover;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
echo "
<div class='rowItem'>
<div class='singleItem' style='background-image: url(\"{$arr3[$i]}\");'>
<div class='itemName'> {$arr1[$i]}
</div>
<div class='itemPrice'><br> Php{$arr2[$i]}
<div class='orderButtonDiv'><a href='menu_burger.php'>ORDER</a></div>
</div>
</div>
</div>";
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 have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.
assets/header.php
<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>
</head>
<body>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
assets/style.css
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
display: block;
width: 100%;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 100px;
text-decoration: none;
font-size: 17px;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.header p {
color: white;
font-size: 50px;
text-align: center;
vertical-align: middle;
font-family: 'Indie Flower', cursive;
}
index.php
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
style.css
.input {
width: 50%;
}
.form {
position: relative;
left: 25%;
}
add this in your stylesheet to fill the header 100%
.header{
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
Check if that css file is being accessed first. If so then have the following
.header {
display: block;
width: 100% !important;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
If still not working add lines one by one and see the effect.
Let me know if you require any further help
.form {
position: relative;
/* left: 25%; */
margin: 0 auto;
text-align: center;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
so change your body tag to remove the left and right margin, may be that is why the full width is not filled
There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.
So you need to either remove the left: 25% from the form or make give it a width of less than 75%.
You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.
i have tested this and it worked.when the size of explore become small without any horizontal scroll bar
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<style>
.input {
width: 50%;
}
.form {
left: 25%;
}
</style>
</head>
<body>
<continer>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
<div class="form" style=" text-align: center;">
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
</div>
</continer>
</body>
</html>