I am having a problem displaying a webpage on Safari. It will not display center, but will instead displays the page to the left and has a huge amount of empty space to the right of it. I don't get this behaviour with Firefox, IE, or Chrome. Can anyone tell me what is going on and how to fix it. The website can be viewed at: digitaldementia.ca. You can view the CSS from your browser when you visit the site. If it is desired I can post it here as well.
Thanks for your help.
Try this CSS:
html, body{
text-align:center;
}
#main_container{
margin:0px auto;
text-align:left;
width: 900px; /* set width accordingly */
}
where #main_container is supposed to be the main container/wrapper of your site.
In your case the huge amount of empty space comes from your div #copyright
Solution:
#copyright {
color:#B8DBFF;
padding-right:25px;
position:relative;
text-align:right;
top:20px;
}
or
#container {
color:#FFFFFF;
margin:20px auto;
padding:0;
position:relative;
text-align:left;
width:989px;
overflow:hidden; /* added */
}
Related
I'm trying to create a banner featuring some services I provide, the image below is exactly how I want it (desktop view) but when I resize the browser the text gets pushed underneath the image and is hidden by over elements of the page overlapping.
How do I make it so the image and text resize with the browser and looks exactly the same as it does on desktop?
I created an example on here http://jsfiddle.net/b7a8cvLb/4/
And my CSS
.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;
}
.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}
.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}
.info_block h5 {
height:100%;
width:100%;
margin:0;
}
If needs be I can set the images to display:none at a certain browser width but I'd prefer to avoid doing this.
I can see your images are already scaling down, if you want to scale down your text too you'll need to step it down using media queries.
Hope that helps!
The content boxes on each of my pages uses the same CSS, however on one page there is a scroll bar in the content box, and the footer does not sit properly.
This is because I use overflow:auto, but when I remove overflow:auto, the content box disappears completely. (The content itself still remains)
I'm not sure what the problem is, since they all use the same CSS and the other pages work fine.
This is the CSS for my content box
#contentProducts {
background:rgba(255,255,255,0.6);
width:80%;
min-height:100%;
overflow:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-radius:20px;
box-shadow: 4px 4px 10px black;
}
the content on the page is just 4 boxes with pictures, the css for those is
#clothingProduct {
padding-top:40px;
position:relative;
background-position:center;
background-size:cover;
text-align:center;
float:right;
width:300px;
height:140px;
margin-right:12%;
margin-top:60px;
margin-bottom:30px;
}
and this is the CSS for my footer
#footer {
float:left;
bottom:0;
position:static;
background:rgba(255,255,255,0.6);
width:100%;
height:20px;
color:black;
margin:auto;
overflow: hidden;
}
Basically, it should look like this (and does on other pages)
but on the product page, it looks like this
I have a workaround fix that involves just setting the height of the box in pixels, but that still doesn't fix the footer sitting in the wrong place.
If you need any more info just let me know, any help would be greatly appreciated.
Normally when I have a problem along these lines it has to do with a typo/mistake in the HTML. Not closing a tag properly or something along those lines, but it is hard to tell without the relevant HTML.
I'm trying to implement a responsive horizontally scrolled list of images.
For example:
<ul>
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
The images are an unknown width and height ratio.
My Requirements:
I want the images to always be 100% height of the browser window at all times.
I want them to be adjacent to each other (without using float; so inline is probably best).
I don't want to break the width/height ratio of the images on window resize.
No javascript.
So far I've tried with this CSS, but I can't seem to get the images not to squash when the browser window is resized:
ul{
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
width:auto;
}
Any takers?
Edit:
I've put a simple fiddle together for an example of where I'm at with it.
Any help would be great...
Okay here we go. After much experimentation I've finally found what I believe to be the answer for most browsers. Seems to work on Firefox 3.5+, Safari 4+, Chrome 3+. I've also tested on an iOS device, an Android device, and IE, though not extensively.
*clears throat*
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
width:100%;
height:100%; /* CHANGE */
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
height:100%; /* CHANGE */
width:auto !important; /* CHANGE */
}
The main factors seem to be making sure that the height properties are 100% all the way down to the last node in the list, including the img (on top of it's max-height declaration).
I've also noticed better success in older browsers appending the !important declaration after the width:auto property.
I'm surprised at the lack of hunger for a layout like this, so if this has helped anybody then please let me know.
I see what you mean by the distortion at low widths when using the %. So one solution would be to also implement some fallback absolute widths too, so that at lower resolutions the images don't re-size.
CSS
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
min-width:150px
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
min-width:150px
max-height:100%;
width:auto;
}
http://jsfiddle.net/MkLd4/
so here's the situation.
I want my specific div to be stretch out to the right of the screen even though the user uses zoom in/out on their browser.
You'll see my example here http://jsfiddle.net/4LD7h/
So this is what it looks like when you zoom out that page.
http://i48.tinypic.com/14kjo1k.png
This is what I want to appear
http://i48.tinypic.com/zwgwwj.png
I don't want any horizontal scroll bars as possible.
Thank you. :)
In
CSS
#container {
width:850px;
text-align:left;
}
replace with
#container {
text-align:left;
}
and
#center {
background:#aa1616;
width:600px;
height:500px;
float:left;
position:relative;
}
replace with
#center {
background:#aa1616;
width:100%;
height:500px;
}
DEMO: http://jsfiddle.net/4LD7h/6/
Use Firefox for this example. (Works fine in IE7)
I have narrowed down an example at: (Where you can do -> view source)
http://www.handbooster.com/example/tricky.html
The problem is that the clear:both attribute on the red div forces it below the left floated blue div. This might well be correct and expected behaviour as that is how FFX renders it.
My problem is that I need to find a way to make the red div be placed directly below "Subheading" BUT I cannot change the clear:both attribute no the red div (as in my case it is rendered by a 3rd party component.)
Is this possible or does the clear:both attribute on the 3'd part component make it impossible to use the component in a floated context as it interfers with other floated elements on the page ?
You can set
#content {
float: left;
margin-left: 0;
}
if it's alright to have the content div floated.
What if you position container relatively, and instead of floating the leftnav you position it absolutely?
#leftnav {
/*float:left;*/
position:absolute; /* New! */
left:0px; /* New! */
margin:0;
padding:1em;
width:160px;
}
#container {
position:relative; /* New! */
top:0px; /* New! */
left:0px; /* New! */
background-color:#FFFFFF;
border:1px solid gray;
color:#333333;
line-height:130%;
margin:10px auto;
width:90%;
}