I have just recently created a website which uses multiple divs. I then zoomed in and out, and particular DIV's move to the left corner, whilst the others move to the right corner of the screen.
Below are the codes for my website, if anyone could help me it would be much appreciated. I have left out majority of the body after the header, as it is affected, but was thinking that this error was to do with one of the DIV's such as the "container" div, and not in a detail in each particular DIV.
HTML:
<html>
<head>
<title> Test Website</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="top_section">
<div id="logo">
<img src="images/pbc_WHITE_bg.tif" width="180px" height="168px">
</div>
</div>
<div id="navigation">
<ul id="nav_menu">
<li>HOME </li>
<li> NEWS</li>
<li> MEDIA </li>
<li> CONTACT</li>
</ul>
</div>
</div>
CSS:
{
position: relative;
margin: 0;
padding: 0;
font-weight: lighter;
}
body {
padding: 0px;
}
p {
color: grey;
font-family: "brandon-grotesque",sans-serif;
font-size: 13px;
}
h1 {
color: black;
font-weight: lighter;
font-size: 14px;
font-family: "brandon-grotesque",sans-serif;
}
a {
font-size: 14px;
color: grey;
font-family: "brandon-grotesque",sans-serif;
}
#container {
margin: 0px auto;
/*background: pink;*/
width: 100%;
height: 169px;
border-bottom: 1px solid #F2F2F2;
}
#top_section {
width: 400px;
height: 170px;
/*background: black;*/
float: left;
}
#logo {
margin-left: 170px;
}
#navigation {
position: relative;
background: blue;
margin-top: 70px;
width: 700px;
float: right;
margin-right: 50px;
}
ul#nav_menu {
list-style-type: none;
}
ul#nav_menu li {
display: inline-block;
padding-right: 5px;
width: 150px;
text-align: right;
position: relative;
float: left;
}
ul#nav_menu li a{
text-decoration: none;
text-align: right;
}
The code you pasted is fine, the problem must be somewhere else that you neglected to share. The problems you see are likely a mix of using floats, text-align: right, and a mix of inline and block elements. Take the time to learn how each of these work together for more consistent and easy HTML development.
Use
overflow: auto;
in you css class where it is needed
OR you may also use
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
There is something they call responsive design it might help you out ;)
it changes because of the fact that screen width isn't the same on every screen + if you scale down the browser window it also changes or on zoom in-out.
the solution is doing this:
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
A little tip if there are div's making your design or webpage flow over on the side's you might add overflow:hidden to those div's in the css this should fix that issue.
I have faced the same kind of problem and I was using pixels. Some say that we should use em instead of px. But it was not possible for me at that point to change all the pixels to ems.
I managed to prevent divs from moving on zooming out by making the size of the container div a little extra so that it can accommodate little change that happens on re-sizing the content while zooming. Hope this helps
Related
Again, just learning CSS and trying to make a fictive homepage.
Here's a problem I came by:
I want to center the links and their background colors inside a DIV- element. However, I also want to keep the DIV centered (15% from each side) and changing the text inside the links will still center them, so the positioning can't be a specific value (need to use per centages, I think).
EDIT: Long explanation shortly: I want to get all four blocks in the middle of the page regardless of changing the size of the browser screen or the texts inside the blocks. Thanks :)
EDIT2: Changed the title to be found more easily from the Search- query.
Anything can be done to the code or do I have to change it somehow? Thanks.
Here's the HTML:
.infos {
padding-left: 15%;
padding-right: 15%;
position: relative;
top: 40px;
}
.infos a {
background-color: black;
color: white;
margin: 0px;
display: inline;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
.infos #centered {
position: relative;
display: block;
padding: 0px;
}
<DIV CLASS="infos">
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
</DIV>
Thank you for your help!
#centered {
display:table;
background:red;
margin:auto;
}
#centered a {
color: white;
margin: 0;
float:left;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
I have an issue with responsive design on my site. The problem is that, when the page is loaded, I can see the "the mobile look" but its zoomed out. I think it's a problem that my page has some element which sets the width to some large number. Because of that I have a horizontal slider and a large empty white area on the right side of the screen.
Any ideas how to fix this?
Site is at http://www.studentskizivot.com/
I used viewport at header.php (head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#media code :
html{
background:none!important;
width:100%;
}
#text-51, #text-79, #polls-widget-7 {
display:none;
}
#bglink{
display:none;
}
body {
background:none!Important;
margin:0px auto;
}
#footercontent .footerboxlast{
margin-top:15px;
}
#footercontent .footerbox {
width: 209px;
display: block;
clear: both;
float: left;
margin: 15px 16px 0px 0px;
border: #FF0000 solid 0;
padding: 0;
background: url(images/skin1/footer_bgrdbox.png);
font-family: "Open Sans";}
nav#primary-navigation{margin-top:15px;}
#header-widget-area{display:none;}
#topbar{padding: 0.4em 0.8em;}
#secondary-navigation select.tinynav{
font-size:1.4rem;}
div#main div#content div#wdsi-slide_in.wdsi-slide div.wdsi-slide-wrap{
display:none!important;
}
.logo-image-enabled #site-title {
line-height: 1.5;
width: 100%;
}
#topbar{width:100%!important;}
.logo-image-enabled #site-title { line-height: 1.5; width: 100%; }
.logo-image-enabled #branding{padding:0px;}
.topbar-enabled #header{background:#EEEEEE;}
#topbar{line-height:14px}
#topbar{padding: 0.4em 0.8em;}
}
Also , when I open the page in firefox for android, many of these css rules do not apply. Opera, Chrome, Maxton, all work well, but firefox is messy. Any clues why?
many, many thx!
In your source code, there is an element that has an inline style with a width of 1041px. Once you remove that your site is good. It's the last element in "#footer".
<div style="height:8px; width:1041px; background:#fff; position: relative; float:left;"></div>
I've added addthis share buttons to a page here and I can't get equal margins/distribution across the div width, so there's a gap on the right hand side which takes into account the fluid width.
I've tried proportional margins/paddings at different percentages, but can't seem to make it responsive.
Here's the CSS and the rest is viewable in an inspector:
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 94%;
margin: 0 0 2em;
height: 32px;
}
.bg.social a {
margin: 0 4%;
padding: 0;
float: none;
}
.addthis_toolbox {
margin: 0 2%;
}
Update: Got it to work with the following, the same as Bartdude's answer:
.bg.social a {
padding: 0 3%;
display: inline-block;
}
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 95%;
margin: 0 0 2em;
}
Basically, what you want is to be able to use text-align:center on your button links. Problem is you can't do that, as you floated them for them to appear side-by-side.
I would then suggest to change the display of those anchors to display:inline-block (be carefull though it's not supported by older IE versions... I don't find it important myself but maybe your target audience is using it), so that you can both make use of the text-align:center of the parent and still have a margin around each anchor.
Alternatively, I would suggest only putting a right or left margin, and use CSS pseudo classes :last-child or :first-child so that the first or last element don't have that margin. This shouldn't actually make no visible difference, but your CSS would be a bit more clean and modern...
Try setting margin to
.addthis_toolbox {
margin: 0 10%; // from 2 to 10%
}
.addthis_toolbox {
margin: 0 5%;
}
I cleared all the margins and divs in parent and child divs. Then :
.bg.social a { width:20% }// divided to 5 equal part
and dicreased the margin of .addthis_toolbox.addthis_32x32_style span {
.addthis_toolbox.addthis_32x32_style span {margin-left: 20px;}
everything is ok.
Try it, add to your css:
div.foraddthis {
text-align: center;
width: 100%;
}
.addthis_toolbox {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-flex;
}
.addthis_default_style .at300b {
float: none;
}
And HTML:
<div class="foraddthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-529d1f4f354abd32"></script>
</div>
<!-- AddThis Button END -->
Demo: http://jsfiddle.net/vPw7u/
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>