I have a header with image in the following HTML page:
<div class="wrapperHeader">
<div class="header">
<img src="header.png">
</div>
<!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
...
</nav>
</div>
<!-- menu-wrap ends here-->
</div>
<!-- wrapper Header ends here-->
The relevant CSS is as follows:
.menu-wrap {
width: 70%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #808080;
margin: 0 auto;
}
.menu {
width: 700px;
margin: 0px auto;
}
.wrapperHeader {
margin-left: auto;
margin-right: auto;
display: block;
}
.header {
width: 1210px;
height: 192px;
margin: 0 auto;
}
.header img {
position: absolute;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
When I zoom in and out the image in the header scales (up or down) faster than the menu, so I loose the proportions of the page. I would like some scaling similar to what you can see in http://www.studio-efekt.com.pl/ Any ideas how to solve this?
This works for you.
The Image is placed into the empty block.
.menu-wrap {
width: 70%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#808080;
margin: 0 auto;
}
.menu {
width:700px;
margin:0px auto;
}
.wrapperHeader {
margin-left:auto;
margin-right:auto;
display:block;
}
.header {
width:70%;
height: 192px;
margin: 0 auto;
border: 1px solid black;
}
.header img {
position: absolute;
max-width:100%;
max-height:100%;
margin: 0 auto;
}
<div class="wrapperHeader">
<div class="header">
<img src="header.png">
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
...
</nav>
</div> <!-- menu-wrap ends here-->
</div> <!-- wrapper Header ends here-->
Hope this helps!
Related
I have two <div> stacked on top of each other and centered. How to make them of equal width? If one of them has width: 96%; and when I give the other one the same width, it looks smaller than the first one.
Here's the HTML:
<div class="background-image">
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</header>
</div>
<div class="slider">
.....smth
</div>
and the CSS:
body{position:absolute; ....}/*needed this because of the body background image*/
.container{
width: 96%;
height: 350px;
background: #fff;
margin-top: 50px;
box-shadow: 0 0 20px #777;
padding: 60px;
}
.slider {
position: relative;
max-height: 500px;
margin: 0 auto;
}
So I need to make the .slider div the same width as the .container
If you include both divs inside another parent div, you can control the width for both at once by setting the style of that parent element. Then the padding around your 1st div will stretch out the parent div, and the 2nd div will fill the horizontal space of the parent. This version works:
HTML:
<div class="background-image">
<div class="mycolumn">
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</header>
</div>
<div class="slider">
.....smth
</div>
</div>
</div>
CSS:
body{position:absolute; ....}
.mycolumn {
width: 96%;
margin-top: 50px;
}
.container{
height: 350px;
background: #fff;
padding: 60px;
box-shadow: 0 0 20px #777;
}
.slider {
position: relative;
max-height: 500px;
margin: 0 auto;
}
https://jsfiddle.net/jq9qrfrw/1/
This is closer to what you want, the background image should be placed as the body background instead of in that unclosed div. Let me know what updates you need to get it closer to how you want.
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</header>
</div>
<div class="slider">
.....smth
</div>
CSS:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
padding: 0;
overflow: hidden;
width: 96%;
height: 350px;
background: #fff;
margin: 50px auto 0 auto;
box-shadow: 0 0 20px #777;
}
.slider {
padding: 0;
width: 96%;
position: relative;
max-height: 500px;
margin: 0 auto;
background-color: red;
}
Just set the width on both elements in the CSS
body{position:absolute; ....}/*needed this because of the body background image*/
.container{
width: 96px;
height: 350px;
background: #fff;
margin-top: 50px;
box-shadow: 0 0 20px #777;
padding: 60px;
}
.slider {
width: 96px;
position: absolute;
max-height: 500px;
margin: 0 auto;
width: 100%;
//box-shadow: 0 0 20px #777;
}
Feel free to uncomment the box-shadow in the .slider element to check the width is correct.
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
I am creating bootstrap page we have four parts of page container.
Please find below of model screen,
<div id="fixedheader">
<header>
</header>
<div class="a">
</div>
</div>
<!--Fixed header End-->
<!--Search content part start-->
<div class="searchcontent">
</div>
<!--Search Content End-->
I want "fixed-header" part should be fixed part of my page. i added style below,
#fixedheader
{
position:fixed;
overflow: hidden;
left:0;
right:0;
}
Now "search content" part some of the content hide in fixed header part in normal view ,find below of my sample output screen
How to fix the issue.
Try
css:
body{
margin: 0;
padding: 0;
background: #80B196;
}
header{
height: 150px;
background: yellow;
}
h1{
margin: 0 auto;
padding: 50px 0 0 0;
width: 300px;
color: #333333;
}
ul{
margin: 0;
padding: 0 0 0 50px;
list-style-type: none;
background: pink;
}
ul li{
display: inline-block;
padding: 6px;
background: rgba(0,0,0,0.4);
vertical-align: top;
}
.wrapper{
height: 1000px;
}
p{
margin: 0 auto;
width: 60%;
}
.fixed-nav{
width: 100%;
position: fixed;
top: 0;
left: 0;
}
and HTML
<div>
<header>
<h1>Header</h1>
</header>
<nav id="main-nav">
<ul>
<li>div</li>
<li>class</li>
</ul>
</nav>
<span id="mine"></span>
<div class="wrapper">
</div>
Codepen Example
I have a problem with a picture going out of its container.
<div id="home" class="cadre">
<div id="photo">
<img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/>
</div>
<div style="width:70%;">
Some text
</div>
</div>
And here is the relevant content of the CSS stylesheet:
img{
max-width:100%;
max-height:100%;
}
#photo{
float: right;
max-width:45%;
height:90%;
margin: 0 auto;
}
.cadre {
color: black;
border-width: 0;
border-radius: 10px;
margin: 40px auto;
padding: 20px;
width: 95%;
background-color: rgba(200,200,200,.2);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,.4) inset;
}
I am new to CSS so I probably made design mistakes, but still I don't understand how it is possible that the pictures goes out of the frame.
It also seems to depend on the OS/explorer, as it works fine on Windows/Chrome but not on Linux/Firefox.
Try this to solve your parent-to-child width problem:
<div class="wrapper">
<div class="inner">
<div id="pic">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
</div>
<div id="text">
some text
<br/><br/><br/><br/><br/><br/><br/>
other text
</div>
</div>
</div>
And CSS:
.wrapper {
max-height: auto;
background: red;
display: table;
}
.inner {
display: table-row;
}
#pic {
float: right;
height: 180px;
max-height: 100%
}
#text {
width:70%;
}
You need to define parent div where the photo is embedded in a way that it does not allow for any element to go "overboard".
#photo {
overflow: hidden;
}
#photo img {
max-width: 100%;
max-height: 100%;
}
Should do the trick in your situation.
I'm fighting with IE7, trying to "make this happen". The thing is that I dont want to use JavaScript. I want to find a solution in case JavaScript is not on. As you can see the image is jagged, pixelated. But if I change the image format, to JPG for instance, it looks much better. I need to have them with transparent background. Any idea why is this happening?
.
<div id="container">
<!-- <div id="main" role="main">-->
<h2>Example</h2>
<div id="group_1" class="level_1">
<img src="img/woodMain.jpg"alt="">
<ul id="ul_1" class="level_2">
<li class="level_2">
<label class="level_3"><img src="img/newLabel.png" alt=""></label>
<img src="img/book_3.png">
</li>
<li class="level_2">
<label class="level_3"><img src="img/newLabel.png" alt=""></label>
<img src="img/book_4.png">
</li>
</ul>
</div><!-- ends 1_group -->
<div id="2_group" class="ground_cero">
<img src="img/2_group.png"alt="">
<!--
<ul>
<li>
<label><img src="" alt=""></label>
</li>
-->
</div><!-- ends 2_group -->
<!-- </div> --><!-- ends main -->
</div> <!--! end of #container -->
and css:
body{ max-width: 100%; }
img{
/*max-width: 100%;*/
max-width: 100%;
height: auto;
}
label{
max-width: 30%;
height: auto;
position: absolute;
}
label img{
}
div#container{
margin: auto;
border: 2px solid red;
}
/*
div#container div#main{
*/
/*border: 1px solid black;*/
/*max-width: 70%;
/*z-index: 1;
}*/
div#container div{
margin: auto;
max-width: 82%;
position: relative;
/*border: 1px solid red;*/
}
div#container div img{
width: 100%;
height: auto;
}
div#container div#group_1 #ul_1{
padding: 0px;
overflow: hidden;
margin: 0px;
/*border: 1px solid green;*/
bottom: 3%;
left: 0px;
max-width: 100%;
position: absolute;
margin-left: 2%;
}
div#container div #ul_1 li {
list-style: none;
margin-left: 5%;
display: inline-block; /* others than IE 7 */
position: relative;
zoom: 1; /* calling the haslayut method inside IE7 */
*display: inline; /*targeting IE6-7 */
bottom: 0px;
width: 25%;
vertical-align: bottom;
}