I couldn't think of the right wording for this question, but here is my problem:
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around.
For example, I have a navigation div floating on its own on the top left corner of the page.
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
This link from "A List Apart" covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queries because they allow you to apply styles based on certain characteristics of the browser or device.
How to keep code in center on zooming?
Center the code on zooming?
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}
Related
I'm pretty new to coding and need to pick some of your brains in order to fix this issue which is occurring on a holding page that I'm currently coding.
The company logo is positioned in the bottom corner and at certain screen size overlaps and interferes with the text (when you manually resize the browser window). I've used media queries so this doesn't happen on devises.
I'm not sure whats possible, but I always need the logo to be in the bottom right hand corner. But I'd like the logo to disappear from the screen when the logo starts interfere with the text , ideally I'd like the user to have to scroll down to see the logo at this point.
This the site in question http://embalmer-tiger-47168.bitballoon.com/
Heres My HTML
<img class="logo--master" src="assets/images/logomark.png" alt="Proud Robinson Logo">
</div>
Heres my CSS
.logos {
position: absolute;
bottom: 55px;
right: 55px;
}
.logo--master {
width: 7em;
}
Many thanks in advance :)
You would need your logo to have a relative position to your text. You can use position:relative. After that if it still doesn't respond like you would like it to, you can position it in a div that as the same width as the page (width:100%) and you can use de margin of your logo to center it (usually margin-left:auto; margin-right:auto; will work, but you might have to use %). Hope this will help you.
Absolutely positioning an element takes it out of the normal flow of the page, so that other elements don't know it's there and will overlap. If you apply a right and bottom margin to .container that matches the size of the logo, the content in .container won't overlap. The logo is about 7em tall/wide (per the width you gave it in css) and is 55px from the right/bottom, so a right/bottom margin of calc(7em + 55px) on .container should leave room for the logo.
div.container {
margin: 0 calc(7em + 55px) calc(7em + 55px) 0;
}
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}