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;}
Related
I want my footer inner div wrappers to mov from right to underneath left and center when I use responsive media queries. However, when moving last element "Contact us" from right to left, it goes below but it does not center, and the previous div "follow us" is not position in the same line as "copyright".
Codepen here
HTML
<!doctype html>
<html>
<head>
<title>Agency</title>
<meta charset="utf-8">
<link href="footer.css" rel="stylesheet" merdia="handheld">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="footer">
<h1>Footer</h1>
<div class="copyright">
<h3>Copyright</h3>
</div>
<div class="social">
<h3>Follow us:</h3>
<p> Twitter, Facebook, Youtube</p>
</div>
<div id="contactfooter">
<h2> Contact </h2>
<p>Contact Form would go here</p>
</div>
</div>
</body>
CSS
/*footer.css*/
*{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
body
{
background-color:#DCDCDC;
}
.wrapper{
max-width:1200px;
width:100%;
margin:auto;
}
.header{
width:100%;
background-color:green;
height:20vh;
}
.footer{
width:100%;
background-color:orange;
font-size:1em;
overflow:hidden;
padding-bottom:3%;
clear:both;
padding-top:5%;
border-top:3px solid #0099FF;
color:black;
}
.copyright{
width:25%;
background-color:red;
float:left;
margin-left:10%;
}
.copyright p{
font-size:0.938em;
line-height: 2em;
}
.social{
width:20%;
background-color:yellow;
float:left;
margin-left:8%;
}
#contactfooter{
width:20%;
background-color:blue;
float:right;
margin-right:10%;
display:block;
}
#contactfooter h2, #contactfooter{
font-size:1.250em;
text-align: center;
}
/*---------MEDIA QUERIES----------*/
#media (max-width:1020px){
.copyright{
margin-left:25%;
float:left;
}
.social{
float:right;
margin-right:25%;
}
#contactfooter{
float:left;
width:30%;
margin:auto; /*does not margin to the center of the footer wrapper.. why?*/
/*margin-right:0%;
margin-left:45%;*/
}
}
You do not need to change their margins for smaller screens, just fix their width.
I have a Div with a 10% width and within its content there is an image I want to be able to center vertically/Horizontally and resize to fit in its container.
It resize well when the windows resize but do not know how can i center the image within the container.
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width:80%;
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
Here is the demo: https://jsfiddle.net/3t2shesb/
Thanks in advance.
If I understand what you want to do, try using transform and position:relative on the img to give you something like this:
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
As shown here:
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
The following works ...
HTML:
<div class='Container'>
<img src='test.png'>
</div>
CSS:
div.Container {
position:absolute;
top:25%;left:25%;
width:50%;height:50%;
background:#FF0;
}
div.Container > img {
display:block;
position:absolute;
left:10%; width:auto;
top:35%; height:30%;
}
Here I assign all 100% of the parents height in the img’s css-declaration (2*)35% + 30%, and use that for scaling ... Maybe not what you want, but it works ... try it out :)
i have this CSS:
<style type="text/css">
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
#text, #text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
#text:hover, #text a:hover {
color:#666666;
text-decoration:none;
}
#text img {
vertical-align: middle;
margin-right:20px;
}
</style>
its currently displaying the image and text inline but i have multiple images/text below each other. how can i make all the images align in the same position below each other?
here is a fiddle: http://jsfiddle.net/8dsTu/
http://jsfiddle.net/8dsTu/4/
<div id="text">
<img src="../images/icons/address.png" height="60" />
<div style="display:inline-block;">
Address 1,<br />
Address 2,<br />
County Post Code
</div>
</div>
Edit css:
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:left;
margin-left:100px;
}
Your HTML is invalid, id property is meant to be unique and you have a few <div> elements with id="text". To get what you want you'll have to: (jsFiddle)
replace all id="text" with class="text" and add <div class="caption"> to wrap each of the captions:
<div id="box">
<div class="box-inner">
<div class="text">
<img src="../images/icons/telephone.png" height="60" />
<div class="caption">00000 00 00 00</div>
</div>
<div class="text">
<img src="../images/icons/email.png" height="60" />
<div class="caption">sales#domain.co.uk</div>
</div>
<div class="text">
<img src="../images/icons/address.png" height="60" />
<div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
</div>
</div>
</div>
Adjust the css:
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
}
.caption{ /* This is the new bit - display:inline-block does the trick. adjust margin-top to your needs */
display:inline-block;
vertical-align:top;
margin-top:15px;
}
#box {
width:100%;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;
}
.text {
overflow: hidden;
width: 250px;
margin: 10px auto;
}
Something like this? But you must replace your id's with classes.
I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
Im a self learner for web designing, so i might missed out some fundamentals coding.
So the problem is the content is overspilling the div from the right in one line.
The code as below
THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="bg">
<div id="mainwrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="contentwrapper">
<div id="leftwrapper">
<div id="contentspacing">
<div id="content">
<p>
asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas
dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
</p>
</div>
</div>
</div>
<div id="rightwrapper">
asdfasdf
</div>
</div>
</div>
</div>
</body>
</html>
THE CSS AS BELOW
/* ---------------------------------------------------------------*/
/* ---------------------> RESET <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}
#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}
#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}
#header {
float:left;
display:block;
}
#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}
p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}
#contentwrapper {
float:left;
display:block;
width:1000px;
}
#leftwrapper {
float:left;
display:block;
width:593px;
}
#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}
#rightwrapper {
float:left;
display:block;
}
Add word-wrap: break-word; word-break: break-all; to #content
Demo here http://jsfiddle.net/ZK6yR/
This occurs when you are using rather long words. Try this:
word-wrap: no-break;