I find that the footer is displayed properly on Chrome but it looks like it doesn't get overflow:hidden; on Firefox. The wrapper div is still going a little more below the footer.
<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html
Here are CSS properties of these two wrapper divs:
.wrapper6 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:180% !important;
font-family: orator std;
overflow:hidden;
}
.wrapper8 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:280% !important;
font-family: orator std;
overflow:hidden;
}
And properties for both footers;
galeri2013.html;
.footy4 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:96%;
overflow:hidden;
}
gallery.html;
.footy7 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:150%;
overflow:hidden;
}
I think I'm not using best ways to handle it, if you see anything wrong/not the best way of coding please tell me so that I can learn and also improve myself.
To clarify again, I want to have my footer stuck to bottom on Firefox, as it is on Chrome!
Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal!
So this is what I did to achieve it basically;
<div class="wrapper">
//some other content
<div class=footer>
//footer content
</div>
</div>
and I've put backoverflow:hidden; to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question.
Hope these can be useful to someone and thanks for everyone who helped.
Related
i have a ribbon on bottom of every report page with an image for call window.print().
i figure out it like this:
<div id="dgdPrint" class="hop">
<div id="dgdPrnImg" title="Print Report..." onclick="window.print();">
</div>
</div>
and i style it with:
#dgdPrint
{ position:fixed;
border-top:1px solid #000;
width:100%;
bottom:0;
right:0;
text-align:center;
height:55px;
margin-top:50px;
background-color:#88A7DB; }
#dgdPrnImg
{ margin-top:10px;
background-image:url('PrinterText.png');
background-position:center center;
background-repeat:no-repeat;
height:35px; }
#dgdPrnImg:hover
{ background-image:url('PrinterText-hover.png'); }
but whole of first div (ribbon) take this effect and on hover of any part of that the image is changed. what's wrong in my code?
It changes because you have background-image:url('PrinterText-hover.png'); } set under #dgdPrnImg:hover
I'm currently redoing some code to update to HTML5 (and trying to de-uglify CSS), but so far my alignment and layout doesn't seem to be working as expected. Here's part of what I have:
<main class="width">
<div class="r1">
<section class="c1">
<h1>header</h1>
stuff
</section>
<!--Line Break-->
<section class="c1">
<h1>header</h1>
stuff
</section>
</div>
<!--Next Column-->
<div class="r2">
<section class="c2">
<h1>header</h1>
stuff
</section>
</div>
</main>
CSS:
#font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(/resources/font.woff) format('woff');
}
* {
margin:0;
padding:0;
font-size:small;
font-family:Roboto;
vertical-align:middle;
border:none;
text-decoration:none;
}
.width {
margin:0 auto;
width:86%;
min-width:1000px;
}
.bg {
min-width:1000px;
background:linear-gradient(#444, #000, #444);
}
main {
line-height:1.5;
text-align:center;
}
body>.main {
font-size:0;
}
section {
border:1px solid #BBB;
background:#000;
border-radius:7px;
display:inline-block;
overflow:hidden;
}
h1 {
background:linear-gradient(#444, #000, #444);
padding:5px;
color:#FFF;
}
.r1 {
color:#FFF;
display:inline-block;
}
.r2 {
color:#FFF;
display:inline-block;
}
.c1 {
width:33%;
}
.c2 {
width:66%;
}
(Ignore r1 and c1 naming. They don't actually represent a row or column)
However, this does not work the way it used to. What I'm trying to do is to have two rows of 66% width columns above each other, and then next to them, a larger single 33% width column to the right of them. Instead, I've got the the first two sections on one line, taking up a total of 66% width (so each section is 33% width), and then the next section ends up underneath it.
Ideally, I want to use the flex code, so that I can use up all available space, but I'm still new to it, and don't know my way around it very well. The problem with using percentage widths is that even after white-space removal, things still break to the next line when zoomed in enough, and I think that the flex method is more elegant and modern anyway.
The goal is to achieve this effect without adding any html tag (div, hr, ...) each three divs.
That mean through css only.
What I thought would be an idea was to set the line-height to 150px and underlining it.
But it doesn't seem to produce the result.
The css I use for now produces the result without the underline:
.projectContainer{
/*line-height:150px;
text-decoration:underline;*/
}
.projectBlock{
position:relative;
display:block;
float:left;
width:200px;
height:150px;
}
.projectImage{
position:absolute;
top:0px;
left:0px;
width:200px;
height:112px;
background-size:contain;
background-position:0% 50%;
background-repeat:no-repeat;
}
.projectCaptcha{
position:absolute;
top:113px;
left:0px;
width:200px;
height:88px;
font-size:12px;
}
And the html is a list of:
<div class="projectBlock">
<div class="projectImage" style='background-image:url(...)'></div>
<div class="projectCaptcha">MUSÉE RATH, GENEVE MAURICE BRAILLARD</div>
</div>
in a:
<div class="projectContainer">
...
</div>
If the comment is removed the result is not what was planed:
Thank you and sorry for my english!
Sounds like you could just add a border-bottom to .projectBlock.
.projectBlock {
border-bottom: 1px solid black;
...
}
You might need to add some margin and padding above and below to get the spacing correct.
You can just use the border property, and if you only want to select certain divs use nth-child(an+b) pseudo-class.
Fiddle
I think you need to clear the floats for each container.
.projectContainer{
height:150px;
border-bottom:1px solid #777;
clear:both;
}
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I have this CSS
.menuPopup div {
width: 100%;
padding: 5px;
}
.menuClose {
width:10px;
height:10px;
padding:0px;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
Which should apply to this HTML:
<div class="menuPopup">
<div >A</div>
<div >B</div>
<div >C</div>
<div class="menuClose">X</div>
</div>
When applied, the .menuPopup div declaration allways overrides .menuClose.
How can I change the order? ie. make the width of "X" 10px instead of 100% ?
It's because you have more selectors in the top declaration.
if you do this it should overwrite:
.menuPopup div.menuClose {
width:10px;
height:10px;
padding:0px;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
See this article for an explanation on how css cascade priorities are handled:
http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html
You can try using !important for the rule you want to be enforced. For example:
.menuClose {
width:10px !important;
height:10px !important;
etc...
}