I wanted to fit this image (galeria.jpg) to the window but It adds scrolling panel at the bottom and the border over the menu. It shouldn't go like this...
HTML CODE:
<body>
<div class="tlo">
<div class="logo">
<img src="logo.jpg" />
</div>
</div>
<div class="galeria" >
<img src="galeria.jpg" />
</div>
<div class="menu">
<ul>
<li>STRONA GŁÓWNA</li>
<li>KONTAKT I LOKALIZACJA</li>
<li>ZAKRES CZYNNOŚCI NOTARIUSZA</li>
<li>OPŁATY W KANCELARII</li>
<li>PRZYDATNE INFORMACJE</li>
</ul>
</div>
</body>
CSS:
body {
background-color:#ffffff;
padding:0px;
margin:0px;
}
.logo{
position:absolute;
margin-left:-400px;
left:50%;
}
.tlo{
height:230px;
width:100%;
background: #e0e0e0;
}
.galeria{
width:100%;
}
JSFiddle: http://jsfiddle.net/SfG3A/
Try this
.galeria img{
width:100%; // Remove this and add below style
max-width:100%;
vertical-align:bottom; // to remove the white space below the image
}
When you give width 100% it takes the width of the image and when you give max-width it restricts the image to have the maximum width of its parent element.
You can add a overflow-x: hidden to the div who contain the galleria.jpg
http://jsfiddle.net/SfG3A/1/
Related
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
i've some problem with the z-index property:
This is the code:
<div id="sidebarCont">
<div id="avatarCont" class="mask">
<img id="" class="" src="img.jpg" alt=""/>
</div>
and the css:
#avatarCont{
overflow:hidden;
height:160px;
width:160px;
margin:0px auto;
background:url('../img/mask.png') no-repeat;
position:relative;
z-index:70;
}
#avatarCont img{
position:absolute;
top:0px;
left:0px;
z-index:50;
}
i whant to have a mask on the image, someone have ideas to solve the problem?
You need to have the mask on top of the image. Make the image the background of the outer container and the mask a background on an inner container. The browser will render the outer container first (the image) and then it will render the inner container (the mask) on top. If you are trying to do alpha transparency, then the web cannot do that for you.
Structure:
<div class="image">
<div class="mask"/>
</div>
CSS:
.image, .mask {
height:160px;
width:160px;
}
.image {
margin:0px auto;
position:relative;
z-index:70;
}
.mask {
background:url('img.jpg') no-repeat;
}
You can use the :after pseudo element, in this way you have a mask after the container: http://jsfiddle.net/7Fx7W/2/
I'm building a 1 column responsive blog site.
I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
Everything is working as required apart from the height of the footer.
I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.
How do I achieve this with css?
You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.
As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do.
This example should demonstrate:
<html>
<head><title>title</title><head>
<body style="margin:0; padding:0;">
<div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
<div id="content" style="height: 500px; background-color: red;">Blog Content</div>
<div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
</body>
</html>
you want some thing like this ??
HTML:
<div id="mainbody">
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
</div>
CSS:
html, body{
width:100%;
height:100%;
}
#header{
position:fixed;
top:0;
height:50px;
width:100%;
background:red;
color:white;
}
#mainbody{
padding-top:50px;
background:blue;
color:white;
width:100%;
}
#footer{
background:green;
position:absolute;
height:100%;
width:100%;
color:white;
}
DEMO
i've built a 3 column layout.
I want to place some Text (heading) over the Image in the middlecontent. But everytime i resize the browser window, the text moves. Any suggestions? I thought, while placing the image in an absolute container (which is itself in an relative one) i can position any absolute layers without the elements moving. Any suggestions?
Here a jsfiddle: http://jsfiddle.net/Dkjsc/3/
UPDATE:
If we remove the height attribute from middlecontent, everything works fine. But is this a way to go?
HTML:
<div id="content" class="content">
<!--LEFT-->
<div id="leftcontent" class="leftcontent"> </div>
<!--MIDDLE-->
<div id="middlecontent" class="middlecontent">
<div id="heading" class="heading">Text</div>
<img src="images/Windows/Window_10.png" alt="" style="width:100%;">
</div>
<!--RIGHT-->
<div id="rightcontent" class="rightcontent"> </div>
</div>
CSS:
html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
.content {
position:relative;
width:100%;
height:100%;
}
.leftcontent{
position:absolute;
width:20%;
height:100%;
left:0%;
}
.middlecontent {
position:absolute;
text-align:center;
width:60%;
height:100%;
left:20%;
top:10%;
}
.rightcontent {
position:absolute;
width:20%;
height:100%;
right:0%;
}
.heading{
position:absolute;
text-align:center;
width:100%;
top:12%;
}
You need to put position relative on an element with a fixed size that you want it relative of otherwise it is relative to the window which keeps changing size
I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the left side of the page, the form on the right side also goes down. How can I fix it so that I can adjust the padding on both the classes independantly. Here is the css:
.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;}
.slider .textholder {padding-top: 100px;}
And here is how it appears in the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="logo"><img src="logo.png" width="242" height="94" border="0" alt="logo" />
</div>
<div class="slider">
<div class="gallery">
<div class="textholder"> <img src="images/textimg.png"></div>
<div class="formbox">Form is here </div>
</div>
</div>
</div>
</div>
Thanks. The website is up at avidest.com/schneer.
Add a float:left to the textholder.
.slider .textholder {float:left;padding-top: 100px;}
I also recommend using a inspecting tool to see what is actually happening. In this case you would have noticed that the textholder is a block-element that uses the full width of the container.