I am creating one website in which I have created single page. The page displaying perfect in 1366 X 768 screen resolution.
But when I am opening the same page in 1024 X 768 resolution the Buttons and some text goes down.
I want to write a CSS in a way so it adjust or work properly in both the resolution. Below screen shot shows my problem.
In 1366 X 768 Resolution Page Looks Perfct! -> http://i50.tinypic.com/ac6blc.jpg
In 1024 X 768 Resolution Some elements goes down!!! -> http://i50.tinypic.com/2vxnjva.png
Can some one look my code and suggest me changes to make page display properly on both resolution.
Thanks a lot.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/*=======Global Styles==========*/
body {
font-family:Geordia, serif;
margin:0;
padding:0;
}
a {
color:#3E97FB;
}
/*==============Container=========*/
div#container {
position:relative;
width:100%;
}
#header {
position:absolute;
top:5px;
width:100%;
background:#FFFFFF;
}
/*========Header 1=========*/
#header1 {
position:absolute;
background:url(images/images/headerbg.png) repeat-x;
width:100%;
height:111px;
left: 0px;
top: 96px;
}
#header1 #form {
float:left;
margin-left:8%;
margin-top:8px;
height:70px;
width:665px;
}
#form .email {
float:left;
margin-right:190px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFF;
}
#form .password {
float:left;
margin-right:2%;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFF;
}
.clear {
clear:both;
}
#form .input {
float:left;
width:200px;
padding:7px 7px;
margin-right:5px;
width:200px;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
#header1 .seprator {
float:left;
margin-left:30px;
background:url(images/images/line.png);
width:2px;
height:72px;
margin-top:15px;
}
#header1 .register {
float:left;
margin-left:6%;
margin-top:8px;
width:280px;
height:70px;
}
.register .noac {
color:#FFF;
font-family:"Trebuchet MS";
font-weight:bold;
text-align:center;
}
.loginbtn {
float:left;
display: inline-block;
width:186px;
height:40px;
}
.advertiserbtn {
display: inline-block;
margin:10px;
}
.publisherbtn {
display: inline-block;
margin:10px;
}
</style>
</head>
<body>
<div id="content">
<div id="header-line"></div>
<div id="header"></div>
<!--End header-->
<div id="header1">
<div id="form">
<div class="email">Email:</div>
<div class="password">Password:</div>
<div class="clear"></div>
<input type="text" class="input" />
<input type="text" class="input" />
<input type="button" class="loginbtn" value="Login" />
<div class="clear"></div>
</div>
<!--From Div End -->
<div class="seprator"></div>
<div class="register">
<div class="noac">Don't have an account yet!</div>
<input type="button" class="advertiserbtn"
value="Free Register" />
<input type="button" class="publisherbtn" value="Premium Registration"
/>
</div>
</div>
<!--End header1-->
<div id="footer"></div>
</div>
<!--End footer-->
</div>
<!--End Content Div-->
</body>
</html>
Use CSS media queries to alter the size of elements as the screen resolution increases. This can be done multiple times to even allow your elements to re size and reorder for mobile/tablet/laptop/desktop screen resolutions. Here is an example:
#media screen and (min-width:1024px) {
.loginbtn {
float: left;
display: inline;
width: 156px;
height: 40px;
}
}
#media screen and (min-width:1366px) {
.loginbtn {
width: 186px;
}
}
Go for a mobile first approach an declare your styles for the smallest width first. Change your widths at your breakpoints.
I think what you want is that the page doesn't get smaller than a specific value.
The easiest way to achieve this is to give you entire page a min-width. A horizontal scroll bar will appear if the window gets to small then.
You should try specifying the dimensions as percentage, instead of all px.
Related
I have two rows like this
<div class="container me">
<div class="message">
</div>
<div class="time">
</div>
</div>
<br />
<div class="container he">
<div class="message">
</div>
<div class="time">
</div>
</div>
with css like this
* {
padding:0;
margin:0;
}
.container {
width:500px;
height:50px;
outline:1px solid green;
}
.message {
width:250px;
height:50px;
border:1px solid red;
display:inline-block;
border-radius:5px;
position: relative;
}
.time {
width:50px;
height:50px;
background:orange;
}
.container.me .time {
float:right;
}
.container.he .time {
float:left;
}
and i am trying to make message block full possible width (100% minus time block), is it possible?
jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/
You can set width for .message to width: calc(100% - 52px); - this 52px is a width of your .time div (50px) + 2px for borders of .message (left and right)
Edit: For IE8 support you cannot use that, so you can try the tricky thing like this: https://jsfiddle.net/L2pqhnsq/
I am designing a header and have a few questions about the issues I have.
The demo is here and the code is below, any help would be much appreciated.
.menu {
position: relative;
width: 100%;
height: 66px;
max-height: 90px;
background: green;
}
.menu img {
max-height: 30px;
}
.menu ul {
left: 0;
margin: 0 auto;
width: 80%;
margin: -30px auto 0 auto;
font-size: 16px;
font-weight: bold;
max-width: 1200px;
}
.menu ul li:first-child {
border-left: 1px solid gray;
}
.menu ul li {
//
width: 140px;
width: 14%;
display: block;
float: left;
text-align: center;
border-right: 1px solid gray;
color: white;
height: 50px;
line-height: 70px;
vertical-align: bottom;
}
.menu ul li a {
color: white;
}
.menubtn {
width: 30px;
height: 30px; //
opacity: 0.5;
cursor: pointer;
}
.menubtn .fa {
font-size: 26px;
color: rgb(75, 0, 130)
}
#menubtn {
position: absolute;
top: 2px;
left: 4px;
}
#media only screen and (min-width: 501px) {
.topbar {
display: none;
}
.menu ul li a {
font-size: 14px;
}
#mybody {
margin-top: 8%;
}
}
#media only screen and (max-width: 1200px) {
.menu ul li a {
font-size: 12px;
}
}
#media only screen and (max-width: 888px) {
.menu ul li a {
font-size: 12px;
}
}
#media only screen and (max-width: 685px) {
.menu {
height: 40px;
}
.menu ul {
margin: 0;
}
.menu img {
display: none
}
.menu ul {
width: 100%;
}
.menu ul li {
line-height: 40px;
height: 40px;
font-size: 13px;
}
}
#media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
.menu {
display: none;
}
}
#media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {
.menu {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
</head>
<body>
<header>
<div class="container-fluid">
<div class="row" style="background-color: lightblue;">
<div class="col-md-8 col-sm-8 col-xs-1">
<div id="banner" style="margin-left: 59%;">
<img height="25px" width="25px" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
<img height="40px;" width="253px;" src="http://staticx.ibncollege.com/wcsstore/ExtendedSitesCatalogAssetStore/907_90722_1_21939/images/FULLIMAGE_88753.jpg" />
</div>
</div>
<div class="col-md-2">
<div id="images" style="float: right;">
<a class="btn btn-social-icon btn-sm btn-facebook" style="text-align: center;" href="#"> <i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-twitter" href="#"> <i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 search-container">
<form id="searchbox" role="form" action="#" method="GET">
<div class="col-md-4 col-sm-12 col-xs-12 searchbox">
<div class="ui-widget">
<input id="Name" name="name" class="form-control searchinput" type="text" placeholder="name" value="">
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<input id="family" name="family" class="form-control searchinput" type="text" placeholder="family" value="">
</div>
<div class="col-md-2 col-sm-2 col-xs-1">
<button style="background-color: blue; border-radius: 14px; border-style: solid;" class="btn-search" type="submit" title="Search">
<div style="background-color: blue;">
<span class="glyphicon glyphicon-search"></span>
</div>
</button>
</div>
</form>
<div style="float: right; text-align: right;" class="col-md">
Click1 Click2
</div>
</div>
</div>
</div>
<div class="hidden-xs">
<div class="menu">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTnYmtXUnZ6g5TwfPndnVQMcVdJO8qkSJqm-dPkNRJ_13IaeTP6Pw" style="width: 100%; max-height: 40px;">
<ul id="idmenu">
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
<li>Item5
</li>
<li>Item6
</li>
<li>Item7
</li>
<li>Item8
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
The way I want it to be is as following:
As you can see I have a logo at the right side of the search box, that is from top of the page to the bottom of the search box.
A banner in middle, three social media links and two links that are positioned in slightly right bottom side of the social media links.
I also have a white image on top of the menu that will be replaced with a proper image.
(I am not creating the menu using nav because of that image that should be on top of the menu;therefore, I have problem with mobile size screen as well, need to do that manually therefore, help to design that with nav would also be appreciated)
I was asked to narrow down the requirement,
I need to put the logo in the location that is shown in the screen shot, not where it is, (it is now at the left side of the banner - please click on 'demo is here' link to see).
Also need to create a hamburger style menu for mobile screens, as I am not using nav it is difficult to achieve. If you know how to solve the issue with nav I would appreciate it, as you can see the current menu is not based on nav.
I need it to be responsive, so if you make any changes I would be grateful if you could consider that.
To start with, for a hamburger style menu on mobile devices I highly recommend FlexNav.
Now, most of what you are trying to do can be accomplished by adding some extra divs, I will explain:
The whole idea of a responsive design is that items are stacked on top of each other, and when you get to a certain point (breakpoint) they float up to sit beside other elements.
The above example shows what would happen if all containers were made float: left; at the widescreen breakpoint.
All of the elements that you want to float next to other elements need be inside the same container. In your case that means one container should have your logo in it, the next container should have your banner, input fields and search box, and the last container should have your social links. Or if you want the social links near the top on mobile you could use float: right; instead of float: left; and put them in an earlier container.
To have your form elements next to each other, they will need width of 50% or less. Percentages work very well for responsive theming.
Finally, if you're planning to do a lot of responsive theming there are tools out there than can be a bit challenging to set up and learn, but make the whole process MUCH smoother such as:
SASS (requires Ruby or an application)
Singularity Grids
Susy (similar to Singularity)
Well, as I always said it’s faster, easier and, specially cleaner, to NOT use boostrap when you want to translate your design to web. Bootstrap is a tool to make fast responsive webs under Twitter own design. It’s good but NOT miraculous. IF you want your own designs on webs you NEED to know css, whatever to modified bootstrap or do it from scratch (and if you know css then you woudn’t use bootstrap too much).
I will start from scratch.
It’s easier when you start with your html layout without, yet, adding the main elements:
<header>
<div class="container-menu-top">
<div class="menu-top">
<div class="menu-top-center">
<div class="icons-left">
</div>
<div class="container-login">
<div class="logo">
</div>
<div class="login">
</div>
</div>
</div>
<div class="menu-top-right">
<div class="social">
</div>
<div class="links">
</div>
</div>
</div>
</div>
<div class="container-menu-bot">
<div class="menu-bot">
</div>
</div>
</header>
And then you add css’s to position the layout correctly (and better if you use colors to make it easier to check everything is ok):
body {margin:0; padding:0;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-menu-top {
width:100%;
background-color: aqua;
height:160px;
}
.container-menu-bot {
width:100%;
background-color: aqua;
height:60px;
margin-top:40px;
}
.menu-top, .menu-bot {
max-width:970px;
width:100%;
height:100%;
background-color: green;
margin:0 auto;
text-align:center;
position:relative;
}
.menu-top-center {
display:inline-block;
background-color: red;
width:50%;
height:100%;
}
.menu-top-right {
display:inline-block;
float:right;
height:100%;
background-color: violet;
width:150px;
}
.icons-left {
width:10%;
float:left;
background-color: blue;
height:100%;
}
.container-login {
width:90%;
float:left;
background-color: brown;
height:100%;
text-align:left;
}
.logo {
height:20%;
background-color: orange;
}
.login {
height:80%;
background-color: yellow;
}
#media only screen and (max-width: 600px) {
.menu-top-center {width: calc(100% - 150px);}
}
As you can see in this FIDDLE in progress, everything makes sense, and is responsive just adding a single line of media queries .The social panel won’t change it’s width so at 600px (you may set your desire break width) width, I have changed the menú-top-center to get all the parent width but the social container. Notice, please I also made de main container to be of a máximum width of 970px (as in your example)
Also, I have set some heights just to be able to check the layout, later on I will delete many properties as the content will set the right height.
Now it’s time to put the elements inside their html containers.
Icons to the left of your login adding the images at the html and as css. Right atm they are on a container responsive so the images inside will change their width as you resize window. If you want a fixed size then give to the container a width on px and to the container-logina width with, again width:calc(100% - yourwidthpx); :
.icons-left img {
width:100%;
display:block;
padding:5px;
}
Your “logo” image in the html with your desired size (removing now the height of his parent):
.logo img {
height:40px;
width:253px;
max-width:90%;
display:inline-block;
}
Your login inputsinside login div (removing now the height of his parent) and the mediaquery to make it resposnive:
.login input, .login button {
display:inline-block;
}
.login input {width:35%;}
#media only screen and (max-width: 600px) {
.login input {width:100%;}
}
Your social icons (I recomend you to insert them as a list in the html):
.social {}
.social ul {list-style:none;margin:0;}
.social li {
height:30px;
width:30px;
float:right;
background-color: blue;
margin-left:4px;
margin-top:4px;
background-repeat:no-repeat;
background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}
Your Links:
.links {
clear:both;
text-align:left;
margin-top:4px;
}
.links a {
display:inline-block;
}
Then remove heights and background-colors and that’s it: FIDDLE
Of course there are still stuff to do to style your project, after all this is the layout, I will leave some work for You :)
If I have time later tonight I may complete your menu trying to explain how to make it resposive with a “burger” icon.
Trust me, All this is MUCH easier and faster tan overriding and modifying your bootstrap to make it look as you want.
Edited (“burger” menú):
Now let’s make the main menú (base on your image). The html is easy:
<div class="container-menu-bot">
<div class="menu-bot">
<ul id="">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
<div class="burger"></div>
</div>
</div>
Where burger is the icon. We give position:absolute to this container and we hide it using display:none. Then with mediaqueries we show the icon while hidden our list. We also need to change the li’s from display:inline-block to display:block and finally set a min-height to the main container so while the list is hidden you still have the “green” menú nav:
.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none; margin:0;}
.menu-bot li {
display:inline-block;
padding:10px 20px;
border-left:1px solid #fff;
}
.menu-bot li:last-child {
border-right:1px solid #fff;
}
.burger {
width:25px;
height:25px;
background-color: red;
position:absolute;
top:7px;
right:7px;
display:none;
}
#media only screen and (max-width: 720px) {
.burger {display:block;}
.menu-bot ul {display:none;}
.menu-bot li {display:block; border:0;}
}
We also add our last class:
.menu-bot .visible {display:block;}
visiblewill just change the display of your list once you click on the burger icon. For that you just need a very simple jquery code:
$(document).ready(function () {
$('.burger').click(function () {
$('.menu-bot ul').toggleClass("visible");
});
});
This could be made with just css and using hover insteed of click, but I find it much better the click event and you future users probably will have a better experience
And that’s it. Quite simple, easy to understand and just a few lines of css.
Final FIDDLE. Good luck with your project
I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.
I have done this:
<div id="Table">
<div id="row">
<div id="col">
<img src="01.png" alt="">
</div>
<div id="col">
<img src="02.png" alt="">
</div>
<div id="col">
<img src="03.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="04.png" alt="">
</div>
<div id="col">
<img src="05.png" alt="">
</div>
<div id="col">
<img src="06.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="07.png" alt="">
</div>
<div id="col">
<img src="08.png" alt="">
</div>
<div id="col">
<img src="09.png" alt="">
</div>
</div>
</div>
with Css:
<style type="text/css">
<!--
img {
width: 100%;
height: auto;
}
#Table {
display: table;
width: 50%;
}
#row {
display: table-row;
}
#col {
display:table-cell;
}
-->
</style>
UPDATE:
I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.
https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0
JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/
I'm working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.
It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Here is the code for an example similar to yours.
JSFiddle
HTML
<div id="wrapper">
<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>
</div>
(Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)
html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
#wrapper {
height:100%;
width:100%;
}
.image-holder {
width:50%;
position:relative;
}
.image-background {
width:100%;
display:block;
}
.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}
Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you'll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.
For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.
.table {
display:table;
width:50%;
margin:0;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
}
.col {
display:table-cell;
border:none;
}
.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}
Updated Redesign Using a Flexable Image Background
According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.
JSFiddle
.price-container {
position:relative;
padding:0;
display:table;
width:50%;
}
.image-bg {
display:block;
position:absolute;
top:0;
left:0;
min-height:100%;
/* min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
width:100%;
height:auto;
margin:0;
padding:0;
z-index:-1;
}
.table-holder {
z-index:2;
padding:2em;
/* min-width:300px; */
}
.printer-display-table {
width:100%;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
font-family:verdana;
font-size:.6em;
}
.printer-display-table td {
border:solid 1px #000000;
padding:.5em;
}
HTML
<div class="price-container">
<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
<div class="table-holder">
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
</div>
Add display: block and remove width from your img tag to get rid of the cellspacing:
img {
display: block;
height: auto;
}
updated fiddle: http://jsfiddle.net/wdb5gq29/42/
I have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.
When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...
Here are some screenshots to illustrate my problem:
When zoomed-in:
When zoomed-out:
Here is my code:
HTML:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="title_bar">
some txt here
<div id="title_img"></div>
<div id="title_txt"></div>
<div id="menu_navigation"></div>
</div>
<div id="title_bar_2">
some txt here
</div>
<div id="container_columns">
<div id="column_1">
<span id="column_1_content">some txt here</span>
</div>
<div id="column_2">
<span id="column_2_content">some txt here</span>
</div>
</div>
</body>
</html>
CSS:
html body
{
margin: 0;
width: 100%;
height: 100%;
background-color:#f2f2f2;
}
div#title_bar
{
height:4%;
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;
}
div#title_bar_2
{
text-align:center;
height:44%;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;
}
div#title_bar img
{
margin-top:1%;
float:left;
}
div#title_txt
{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;
}
div#menu_navigation
{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;
}
div#container_columns
{
margin:auto;
width:76.5%;
margin-top:2%;
height:27%;
border-style:solid;
border-color:blue;
}
div#column_1
{
height:100%;
width:49%;
float:left;
border-style:solid;
border-color:blue;
}
div#column_2
{
margin-left:1%;
width:48%;
float:left;
height:100%;
}
Hi This is happening because you are using the property height. try not to use it, if you want this property.
html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}
div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}
div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}
div#title_bar img{
margin-top:1%;
float:left;}
div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}
div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}
div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}
div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}
div#column_2{
margin-left:1%;
width:48%;
float:left;}