The problem occurs in the images under the Get Tickets button on this page http://www.luaumakaiwa.com/Terms/tabid/71/Default.aspx
When you see the page with a mobile device the images don't appear centered but left-aligned.
The code is
#media(max-width:717px){
.top-img-cont{
display: block;
width: 100%;
height: 207px;
overflow: hidden;
}
}
I tried adding "margin: 0 auto;" to class top-img-cont but it still doesn't work.
You need to add:
.top-img-cont img {
display:block;
margin:0 auto;
width: 200px;
height: auto;
}
Related
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I am trying to stop the horizontal scroll here : http://imaginationmuzic.com/
but to no avail, if you check the css overflow-x: hidden is there attached to the html and body in the CSS. It doesn't work in Chrome or Safari.
Add "position: relative" to your css for the #wrapper element like so:
#wrapper {
margin: 0 auto;
width: 1200px;
text-align: left;
background: #000;
overflow: hidden;
position: relative;
}
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
I am trying to get my basic webpage layout together and I hit a few problems. Could someone please help me solve it. My understanding of CSS is not superb.
Code: http://jsfiddle.net/HJLzt/
The sticky footer is working, and I want to have a column left and right of the page in between header and footer. I'm not sure if the way I did it is correct.
Between left and right column and header and footer I would like to put the content. How do I center it. I cannot find a proper way, as there is always overflow and I want it only to go between the left and right column and nothing to cut off.
Thank you for your help!
EDIT:
I have updated my layout and used a bit of jquery to help out. I know I should try and make everything work in css, but it seems impossible.
Maybe I should add, that I want a whiteboard as theme. I want a wooden frame, so the sidebars always have to connect to the header and footer, as the top and bottom frames go through there.
If somebody could have a look and tell me if that is ok or not.
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#main header{
height: 100px;
width: 100%;
background-color: #5d3be6;
}
footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color: #afeba4;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#layout_left{
float: left;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#layout_right{
float: right;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#content_layout{
border-left: 100px solid #e4f662;
border-right: 100px solid #e4f662;
width: auto;
height: auto;
background-color: #c36161;
}
#content{
margin: auto;
width: 96%;
}
As you've stated you're new to CSS but I'd very much recommend against your layout, it's seemingly 10 years ago standard. (no offense intended ofcourse, you're new to this, you're not going to know the do's and do not's as of yet).
Research online portfolio examples using google for ideas!
to answer your question:
I recognise your sticky footer code, I didn't work for me either, well not completely.
It doesn't work great, I'd recommend: http://css-tricks.com/snippets/css/sticky-footer/
I'd tell you myself but that tutorial is very well written and easy to understand and implement.
And for centering container use:
margin: 0 auto;
centering text you can use:
text-align: center;
Hope that helps.
I know I should know how to do this, but for all of my searching on SO and the internet, it's evading me. A friend wants a page with a fixed width centered wrapper, 990px wide. Left and right will have no content, but he wants the header and footer to stretch off the ends of the page like a liquid layout. I never build sites like this so I'm stuck, I only do fixed width centered wrappers.
I want to accomplish this with CSS over tables, that's his preference.
The header isn't straight black, it's a thin .png that is repeated as a BG image.
The footer is a solid BG color.
Page is currently set up with the proper header and footer contained in the center wrapper but nothing is stretching off to the left and right.
Page link: http://www.jalvisualmedia.com/testsite/mystique/private_label.php
If I'm omitting anything that would be helpful, please let me know.
You could try putting the #wrapperTop and #footer ids outside of the fixed width center wrapper and set their width to 100%.
Try this
#wrapperTop{
width: 100%;
height: 162px;
margin: 0;
}
#navbar {
height: 40px;
width: 990px;
margin: auto;
background-image: url(../graphics/bg_top.png);
}
#header {
height: 120px;
width: 990px;
margin: auto;
}
#imageSlice {
width: 990px;
height: 95px;
background-color: white;
margin: auto;
}
#footer {
width: 100%;
height: 145px;
margin: 0;
background-image: url(../graphics/bg_bottom.png);
}
#navBox {
width: 600px;
height: 75px;
margin: auto;
}