I am working on getting the hang of HTML5/CSS and it is going OK thus far. I recently added a footer to my play website, and have it attached to the bottom of the page and centered. However, while the footer is centered correctly under my main content while previewing through a web browser, in the design view of Adobe Dreamweaver CS6 it shows the footer as way off to the side of the main content div. I find it odd it would appear this way in design view, but work as intended while testing. Is this just the cause of how I coded it? It is slightly annoying that I have to scroll way off to the right to see the footer in design view...
Any suggestions as to why this is, or any suggestions to the general coding, would be greatly appreciated. Below is how I coded in my footer. Thank you.
.footer {
position: absolute;
bottom: 0px;
width: 960px;
padding: 10px 0;
background-color: #0033FF;
}
yes, its correct that Dreamweaver's output is quite different than that of web browser's output and there is nothing wrong with your code.
Dreamweaver's internal web browser is not much updated and doesn't supports some HTML and CSS tags.
so just ignore Dreamweaver's web browser..
Related
Having a hard time figuring out why my website scrolls way left in the mobile version!
I have checked all of my widths and even tried some suggestion on here but the site still scrolls to the right of the screen! Made sure common viewport code is in the head tag but to no avail. This is a WordPress site based on the twentysixteen theme
There should be no scrolling left or right on the mobile version of my site.
I've been debugging other css issues and this problem is becoming a major headache. Any clue as to what may be causing this width issue with the mobile css?
https://phoenixim.com/liveinhomecare/
CSS Style Sheet
https://phoenixim.com/liveinhomecare/wp-content/themes/twentysixteen/style.css?ver=5.2.2
Your problem comes from:
.banner {
margin: 0 -600rem;
padding: 0.25rem 600rem;
}
This code tries to break out of the container using the negative margin/padding trick. To fix this, try:
#main {
overflow: hidden;
}
As the title says, the website is scrolling to the right when there is no content there.
I can only recreate this when using it on an actual mobile device.
Currently working on transferring it over, that's why the link is currently like that.
http://georgecohen-co-uk.php5.hostingweb.co.uk/
If anyone could help it would be greatly appreciated!
It may be a problem with animations? Maybe div which is sliding on the load expand ur page in horizontal.
Learn more about animations.
Or in CSS add
html, body {
margin: 0 auto;
padding: 0;
width: 100%;
overflow-x: hidden;
}
Please try this
overflow-x:hidden;
It might fix your problem
Try coloring your divs and /or respective borders so you can track down the issue. I would maybe use firebug or other equivalent plugin/ embedded browser tool
I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
First post. Preface - Recently started web developing so don't have much experience with IE7.
Created a webpage using Adobe Muse for the first time because it's supposed to be fast for the design side. Design was fast but having some weird issues displaying the page in IE7. A div always jumps to the very top of the page whether the positioning is absolute or relative. Not sure what is going on. The page is found at
http://dealer.dealers2farmers.com/dealers/cherokeegarage/
There is a horizontal div that contains the "Search Inventory" and Google map that always jumps to the top of the page in IE7.
This is the CSS of the div
#horzBannerPosition
{
z-index: 2;
width: 0.01px;
top: -3px;
margin-bottom: -3px;
position: relative;
}
I thought the width was strange, Adobe Muse wrote most of this but it seems to work just fine with newer browsers. Not sure why this jumps to the top of the page in IE7. Any ideas?
Ok with just a quick glance over, looks like you have a conflict with your z-indexing, your positioning, as well as using top. Remember for IE7, z-indexing actually starts at 0 and gets all messy from there (this may help: http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7). Also careful with using classes and id's in the same tag. I would have to dedicate more time to this to check it out in full, but check out that article for the time being.
I am making a simple little web based control panel of sorts, and my lack of CSS knowledge is killing me. I basically need to make a div class that uses both an image icon and places a text caption underneath it (both are links to the target page).
I found some examples for doing this on various sites, but none of them work for placing the icon/captions side by side. To give a better idea of what I am trying to do, CPanel is a perfect example of what I am trying to accomplish.
How can I go about doing this?
Something like this maybe?
<div class="image-caption">
Some Text
</div>
.image-caption {
background: url(icon_path) no-repeat top center;
width: icon_width;
padding-top: icon_height;
}
Found a website with a very simplistic approach that works perfectly here...
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm