I asked this question before, but it was too confusing and I couldn't clarify it as well. I fixed my website and now doing test to make my responsive site work on different mobile platform. However, when open the site on Android mobile, everything is fall apart.
For responsive design, I am using external file and linking it to html like this.
here is the website http://www.sfu.ca/~nnabeel use mobile to open the site.
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:786px)" href="medium-style.css" /> <!--Tablet-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small-style.css" /> <!--Mobile-->
I am using meta-tag to make the site scale able to different platforms.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0"/>
Here is my HTML/CSS code for responsive design.
HTML:
<body>
<div id="controls">
Home
Work
About
</div>
<div id="pagewrap">
<div id="home">
<article>
<img src="images/Logo.png" width="150" height="150" alt="Logo"/>
<p>My name is Nabeel Muhammad and I change innovative ideas into design </p>
<div id="socialmedia">
<img src="images/twitter.jpg" height="40" width="40" alt="Twitter Logo"/>
<img src="images/linkedin.jpg" height="40" width="40" alt="Linkedin Logo"/>
</div> <!--Social Media Ends-->
</article>
<div id="skillslevel"><p>Skills Level</p></div>
<section>
<div id="psskills"> <img src="images/photoshop.png" width="40" height="40" alt="Adobe PhotoShop" /> </div>
<div id="psrating"> </div>
<div id="aiskills"> <img src="images/illustrator.png" width="40" height="40" alt="Adobe Illustrator" /> </div>
<div id="airating" > </div>
<div id="inskills"> <img src="images/indesign.png" width="40" height="40" alt="Adobe InDesign" /> </div>
<div id="inrating"0> </div>
<div id="dwskills"> <img src="images/dremweaver.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="dwrating"> </div>
<div id="prskills"> <img src="images/premier.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="prrating"> </div>
<div id="htmlskills"> <img src="images/html.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="htmlrating"> </div>
<div id="cssskills"> <img src="images/css.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="cssrating"> </div>
<div id="jsskills"> <img src="images/javascript.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jsrating"> </div>
<div id="jqskills"> <img src="images/jquery.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jqrating"> </div>
</section>
<div id="scale"> <img src="images/linebar.png" width="330" alt="Scale"/> </div>
<div id="ratingnumber">
<ul>
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
</div>
</div> <!--Home Ends-->
</div>
CSS for mobile
#pagewrap {
width: 480px;
margin: 0 0 0 -0.6em;
position:relative;
}
#controls {
margin:-0.3em auto 0 -0.3em;
text-align: center;
width:480px;
font-family: 'Bebas';
font-size:1.87em;
background-color: #b0d8a3;
line-height:1.3em;
}
#controls a {
display: inline-block;
width: 480px;
margin: 0 auto;
background: #5cc3c1;
color: #fff;
text-decoration: none;
border-radius: 5px;
line-height: 32px;
}
#home article img {
position:relative;
left:3em;
top:4em;
}
#home article p {
font-size:2.5em;
font-family: 'Bebas';
text-align:left;
position:relative;
width:10em;
left:1em;
top:1em;
line-height:1.1em;
padding: 0 0;
}
#socialmedia {
position: relative;
top:-1.8em;
left:-0.5em;
margin-right:1em;
}
#socialmedia img {
position:absolute;
left:8em;
top: 2.5em;
}
/*Skills*/
#skillslevel {
position:absolute;
top:25em;
left:2.5em;
}
#skillslevel p {
font-size:1.5em;
font-family: 'Cabin';
}
section {
position: relative;
bottom:22.5em;
}
section #psskills {
position: absolute;
left:2.5em;
top:27em;
}
section #psrating {
width: 20.3em;
height: 2.3em;
background: #bfddc3;
position: absolute;
left:5.5em;
top:27em;
}
section #aiskills {
position: absolute;
left:2.5em;
top:30em;
}
section #airating {
width:18.6em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:30em;
}
section #inskills {
position:absolute;
left:2.5em;
top:33em;
}
section #inrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:33em;
}
section #dwskills {
position:absolute;
left:2.5em;
top:36em;
}
section #dwrating {
width:19.8em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:36em;
}
section #prskills {
position:absolute;
left:2.5em;
top:39em;
}
section #prrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:39em;
}
section #htmlskills {
position:absolute;
left:2.5em;
top:42em;
}
section #htmlrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:42em;
}
section #cssskills {
position:absolute;
left:2.5em;
top:45em;
}
section #cssrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:45em;
}
section #jsskills {
position:absolute;
left:2.5em;
top:48em;
}
section #jsrating {
width:14.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:48em;
}
section #jqskills {
position:absolute;
left:2.5em;
top:51em;
}
section #jqrating {
width:12.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:51em;
}
#scale {
position:absolute;
top:48.5em;
left:5.2em;
}
#ratingnumber ul{
position:absolute;
top:57em;
left:-6em;
list-style:none;
}
#ratingnumber ul li{
display:inline-block;
margin-left:9em;
font-family: 'Cabin';
font-size:16px;
}
I know its alot of CSS, some of you might find some of the things useless, but that is how I approach the problem.
So when I open the website in tablet, it works fine, but as soon as I open it in mobile, the design fell apart.
Thanks for the help.
I've noticed in your viewport you've spelt minimum in minimum-scale incorrectly.
This will break the scaling.
Related
My Problem
I want to make text-box/a box over an image with div, i already tried this but why it can't.
My code goes here:
HTML/CSS :
.main{
position: relative;
margin: 8;
}
.main img{
position: relative;
height: 510px;
width: 100%;
}
.main-content{
position: absolute;
background: white;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>PokeMart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<img src="valor.png">
<h3>PokeMart</h3>
<h4>Login</h4>
<h4>Register</h4>
</div>
<div class="main">
<img src="bg.jpg" />
<div class="main-content">Text</div>
</div>
<div class="footer">
<h5>Pokemart established 2017, powered by Pokemon Company</h5>
<h5>Copyright © 2017 LL. All Right Reserved.</h5>
<div class="contact">
<img src="facebook.png" width="25" height="25">
<img src="google.png" width="25" height="25">
<img src="twitter.png" width="25" height="25">
<img src="github.png" width="25" height="25">
<img src="instagram.png" width="25" height="25">
</div>
</div>
</body>
</html>`
CSS code just the floating div, I have tried Display: Inline-block still don't work.
You're using absolute positioning but not directing where the content should be placed. Try using top,left,right,bottom to adjust the content position.
top:20%;
right:100px;
.main {
position: relative;
margin: 8;
}
.main img {
position: relative;
height: 510px;
width: 100%;
}
.main-content {
position: absolute;
top: 20%;
right: 100px;
background: white;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>PokeMart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<img src="valor.png">
<h3>PokeMart</h3>
<h4>Login</h4>
<h4>Register</h4>
</div>
<div class="main">
<img src="http://via.placeholder.com/9000x500" />
<div class="main-content">Text</div>
</div>
<div class="footer">
<h5>Pokemart established 2017, powered by Pokemon Company</h5>
<h5>Copyright © 2017 LL. All Right Reserved.</h5>
<div class="contact">
<img src="facebook.png" width="25" height="25">
<img src="google.png" width="25" height="25">
<img src="twitter.png" width="25" height="25">
<img src="github.png" width="25" height="25">
<img src="instagram.png" width="25" height="25">
</div>
</div>
</body>
</html>`
.wrap {
border: 1px solid #000;
position: relative;
max-width: 450px;
}
.wrap img {
border: 1px solid #000;
display: block;
width: 100%;
box-sizing: border-box;
}
.wrap .overlay {
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
}
.wrap .overlay .box {
margin: auto;
background-color: #FFF;
border: 1px solid #000;
padding: 40px;
}
<div class="wrap">
<img src="http://www.telegraph.co.uk/content/dam/gaming/2017/10/10/Pokemon-Halloween_trans_NvBQzQNjv4BqZPnXlBHEdt8AtjizIYNgmRSlK0RKxqt6w8JJghUtSuI.jpg?imwidth=450">
<div class="overlay">
<div class="box">box</div>
</div>
</div>
I'm create html page called AboutUs.html. I was tasked to complete the page but there is a problem. I want to align the three box in horizontally something like this:
but I try using some CSS code but still could not align in horizontal.
Wrong Output:
I want the first box to be left, for second box to be center and the third box to be right. Can anyone please help me fix this problem.
This is About.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Trees Creative - About Us </title>
<link rel="stylesheet" href="_stylesheets/Css_Reset.css"/>
<link rel="stylesheet" href="_stylesheets/mystyle.css"/>
</head>
<body>
<div id="wrapper">
<header>
<a id="logo" href="#">Two Tree Creative</a>
<nav id="mainNav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="welcome">
<h1>Designing your world</h1>
<p>One pixel at a time</p>
</section>
<section id="about">
<h2>About us</h2>
<article id="about_info">
<p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
<h3>Meet Our Team of Creatives</h3>
<p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
</article>
<aside id="about_team">
<div class="row">
<div class="image">
<img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
<div class="row"></div>
</aside>
</section>
<footer>
<p>Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley</p>
</footer>
</div>
</body>
</html>
For mystyle.css code, under about_team id element i need to code something in order for the 3 box to be align in horizontally.
#wrapper {
max-width: 1280px;
margin: auto;
}
/*header*/
header {
background-color: white;
width:100%;
height: 165px;
text-align: center;
margin-top: 60px;
}
#logo {
background: url(../_images/ttc_logo.png) no-repeat;
width: 85px;
height: 85px;
margin: auto;
margin-bottom: 0px;
display: block;
text-indent: -9999px;
}
#welcome
{
background: url(../_images/banner.jpg);
width:100%;
height:650px;
overflow:hidden;
text-align:center;
color:white;
vertical-align:middle;
}
#welcome h1
{
font-size:4em;
font-family:'Adobe Garamond , serif';
padding-top:200px;
text-transform:uppercase;
}
#welcome p
{
font-size:3em;
font-family:'Adobe Garamond , serif';
font-style:italic;
font-weight:bold;
}
#about
{
margin:auto;
height:550px;
background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
background-position:-150px, 115%;
background-repeat:no-repeat, no-repeat;
}
#about h2
{
text-align:center;
text-transform: uppercase;
font: 3em 'Adobe Garamond, serif';
font-weight:bold;
padding-top:50px;
margin-bottom:25px;
color:rgb(82, 71,65);
}
#about h3
{
font:36px Arial, sans-serif;
margin-top:60px;
margin-bottom:10px;
color:rgb(134,118,92);
}
#about_info{
float:left;
margin: 0 auto;
padding-top:37px;
width:40%;
height:400px;
padding-left:125px;
}
#about_team
{
float:left;
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
#mainNav{
width: 680px;
margin: auto;
}
#mainNav ul li {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
#mainNav li a:link{
text-align: center;
display: block;
float: left;
width: 110px;
text-decoration: none;
text-transform: uppercase;
color: #5b866b;
margin: 20px 20px;
height: 20px;
padding: 5px;
border-radius: 5px;
}
#mainNav ul li a:hover,
#mainNav ul li a:focus
{
background: rgb(185,140,72);
color: white;
box-shadow: 2px 3px 4px 0px #CC9933;
}
footer{
background-color: #dee7e1;
text-align:center;
height:20px
padding:20px;
clear:both;
}
https://jsfiddle.net/ow6hc90f/1/
Just add
.image {
float: left;
}
and remove the float from this
#about_team {
/* float:left; */
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
You can use CSS Flexbox. Make your three .image divs wrap under a parent div (.image-block - in my case).
Look at this Codepen
Something like this:
.image-block {
display: flex;
justify-content: center;
}
.image {
margin-right: 10px;
text-align: center;
}
<div class="image-block">
<div class="image">
<img src="http://placehold.it/200x200" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
Hope this helps!
Add width: 3 times (imageWidth+margin) into #about_team and add width: 150px and display: inline-block into .image. font-size: 0 in #about_team is to remove space between inline-block element, and you need to restore the size in the .image.
#about_team {
width: 480px;
float: right;
font-size: 0;
}
#about_team .image{
display: inline-block;
width: 150px;
margin-right: 10px;
font-size: 14px;
}
<aside id="about_team">
<div class="row">
<div class="image">
<img src="https://avatars3.githubusercontent.com/u/1024025?v=3&s=400" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://a5.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0NTIzODQwMDE1.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxNjk3OTMxNzg5.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://i142.photobucket.com/albums/r96/thisdayinmusic/PaulMcCartneyHandsomePaul.png" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://static.giantbomb.com/uploads/original/8/84561/1465721-georgeharrison.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
</aside>
So ive managed to figure out how to use #media to change the width for my website but the button images become very small and wanted to change the size for part of the website.
Ive figured out how to change all the images on the website to be a larger image size but it kind of makes things look out of place!
#media only screen and (max-device-width: 480px) {
img {
width: 65px;
height: 65px;
}
}
so if i wanted to change only the containers div images to a certain height/width, what should i do?
Also can you change a image not even to do with a div, like a single image in the html using these #media ?
and last thing while im asking, can you make images disappear using #media?
I have been searching the web for a answer for awhile now and cant figure this out!!! any help would be really appreciated :) thanks
Heres the code to my website if thats needed?
and my website is www.lawrencetrigg.tk
cheers guys and girls!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">
a:-webkit-any-link{
text-decoration:none !important;
}
body {
background-color: black;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
left: 0;
right: 0;
width: 750px;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
left: 0;
right: 0;
width: 750px;
height: 150px;
color: black;
text-align: center;
margin-left: auto;
margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-middle-one {
float: left;
width: 100%;
font-size: 20px;
padding: 1px;
height: 250px;
border-color: white;
color: white;
top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
#media screen and (max-width:850px) {
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
width: 100%;
height: 100%;
text-align: center;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
width: 100%;
height: 150px;
color: black;
text-align: center;
}
}
#media only screen and (max-device-width: 480px) {
img {
width: 65px;
height: 65px;
}
#top {
position: absolute;
top: 0px;
background-image: url("images/background-top-one.jpg");
background-repeat: repeat-x;
font-size: 25px;
width: 100%;
height: 100%;
text-align: center;
}
#bottom1 {
position: fixed;
background-image: url("images/background-bottom-one.jpg");
bottom: 0px;
width: 100%;
height: 250px;
color: black;
text-align: center;
}
div.transbox {
font-size: 25px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
}
</style>
</head>
<body>
<div id="top">
<div class="col-top-one">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Education</li>
<li>Skills</li>
<li>Work</li>
<li>Gym</li>
<li>Download CV</li>
<a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
<img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-facebook32.png" style="float:right;" />
<strong>Facebook</strong><br />
</span>
</a>
<a href="https://www.steam.com" class="tooltip">
<img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-steam32.png" style="float:right;" />
<strong>Steam</strong><br />
</span>
</a>
<a href="https://www.youtube.com" class="tooltip">
<img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-youtube32.png" style="float:right;" />
<strong>Youtube</strong><br />
</span>
</a>
<a href="https://www.dropbox.com" class="tooltip">
<img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-dropbox32.png" style="float:right;" />
<strong>Dropbox</strong><br />
</span>
</a>
<a href="https://www.skype.com" class="tooltip">
<img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-skype32.png" style="float:right;" />
<strong>Skype</strong><br />
</span>
</a>
<a href="https://www.google.com" class="tooltip">
<img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-googleplus32.png" style="float:right;" />
<strong>Google Plus</strong><br />
</span>
</a>
</ul>
<div class="col-middle-one">
<div class="transbox">
<p>Lawrence William Trigg</p>
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
</div>
<div class="transbox">
<p>Under Construction</p>
</div>
</div>
</div>
<div id="bottom1">
<a href="#" class="tooltip">
<img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-mobile1.png" style="float:right;" />
<strong>Mobile Number</strong><br />
0481718550
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-email1.png" style="float:right;" />
<strong>Email Address</strong><br />
lawrencetrigg#me.com
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-picture1.png" style="float:right;" />
<strong>Name</strong><br />
Lawrence Trigg
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-home1.png" style="float:right;" />
<strong>Test</strong><br />
Home
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-favorite1.png" style="float:right;" />
<strong>Test</strong><br />
Favorite
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-website1.png" style="float:right;" />
<strong>Website</strong><br />
http://lawrencetrigg.tk/
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-dob1.png" style="float:right;" />
<strong>Date Of Birth</strong><br />
8th May 1989 / 26 Years old
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" onmouseout="this.src='images/icons/icon-location1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-location1.png" style="float:right;" />
<strong>Test</strong><br />
Location
</span>
</a>
</div>
</body>
</html>
Anything you add under #media{...} tag will work only on specified screen size. For example any rules mentioned in below media block will work only if the width of the screen is <= 480px, else it wont work. So you can hide, change height do other stuff for specific screen sizes:
#media only screen and (max-device-width: 480px){..}
(If I) wanted to change only the containers div images to a certain
height/width, what should i do?
Add them under #media tag
#media...//screen size{
.certain-image-class{
//css rules here
}
}
Also can you change a image not even to do with a div, like a single
image in the html using these #media ?
Yes, just like above. Assign the image a class or id
#media...//screen size{
.myImage{
//css rules here
}
#myImage{
//css rules here
}
}
last thing while im asking, can you make images disappear using
#media?
Yes, same like above(Use class or Id); the image wont show on the screen size specified:
#media...//screen size{
.myImage{
display:none;
}
#myImage{
display:none;
}
}
I'm working on my portfolio site and I'm a beginner to all this.
I'm using media query to change my site for phones. When I switch my phone to landscape, it get's all out of wack.
Basically I'm having trouble with aligning my logo/contact buttons properly for different layouts. Also, on my phone the footer is completely gone!
Here is my test site I've uploaded: example
My CSS
body {
background-color:#0e0c0f;
margin: 0;
padding: 0;
}
#container{
height: 865px;
font-size: 0;
}
#logo{
margin-top: 10px;
position: fixed;
width: 100%;
height: 32px;
}
.nav{
float: right;
}
#portfolio{
margin-top: 47px;
height: 800px;
white-space: nowrap;
display: inline-block;
}
#footer{
background-color:blue;
position: fixed;
width: 100%;
height: 32px;
}
#media only screen and (max-device-width: 800px) {
#logo{
margin-top: -50px;
position: fixed;
width: 100%;
height: 20%;
background-color:#0e0c0f;
}
.logoimage{
margin-top:15px;
margin-left:15px;
}
.nav{
float:right;
margin-left:15px;
}
#portfolio{
margin-top: 47px;
white-space:normal;
display:list-item;
}
.art{
width:100%;
}
#footer{
background-color:red;
height: 32px;
}
}
And my html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='jquery.mousewheel.js'></script>
<script>
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 90);
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<div id="logo">
<img src="images/logo.png" class="logoimage">
<img src="images/resume.png" class="nav">
<img src="images/contact.png" class="nav">
</div>
<div id="portfolio">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
<img src="tester.png" class="art">
</div>
<div id="footer">
Help
</div>
</div>
</body>
</html>
Any help or tips is greatly appreciated.
In your CSS media query, try using max-width instead of max-device-width
I am new to webdesign and I thought I grasped the idea on how to make a layout. I am having a hard time positioning the images correctly in my layout to make a proper header.
The image posted is what i am trying to achieve. I posted the code I wrote which is totally wrong. Any help is appreciated! -thank you
http://img220.imageshack.us/img220/7097/helpcopy.jpg)
HTML
<div id="container">
<div id= "header">
<div id="leftimage">
<img src="images/1.jpg" alt="" width="604" height="85" />
</div>
<div id ="rightimage">
<div id="verticalimage">
<img src="images/2.jpg" alt="" width="29" height="85" />
</div>
<div id="horizontalimages">
<img src="images/3.jpg" alt="" width="182" height="32" />
<img src="images/4.jpg" alt="" width="182" height="22" />
<img src="images/5.jpg" alt="" width="182" height="31" />
</div>
</div>
</div>
</div>
CSS
body{
background: white;
font-family: Arial, Helvetica, sans-serif;
color:#7d806c;
font-weight: bold;
}
#container{
width: 1000px;
margin:0 auto;
outline: 1px dashed red;
}
#leftimage{
width:604;
height: 85;
float: left;
}
#rightimage{
width: 211;
height: 85;
float: right;
margin: 25px 0 0 0;
}
#verticalimage{
width:29;
height:85;
float:left;
}
#horizontalimages{
width:182;
height:85;
float: right;
}
There is no style for header so its not aligning the div properly. and px is missing in "horizontalimages" class. Add the below style in your css
#header {position:relative; background-color:#FFF}
#horizontalimages{width:182px; height:85px; float: right;}
I am just scripting this out by looking at your layout. Hopefully it will help you to figure out how to manage the floats. Output: http://jsfiddle.net/P3Sjk/
<html>
<body>
<style type="text/css">
* { margin:0px; padding:0px; }
div.header{ width:1000px; }
div.w604 { float:left; width:604px; height:85px; background-color:#65FF00; }
div.w29 { float:right; width:29px; height:85px; background-color:#000000 }
div.w182 { float:right; width:182px; height:85px; }
div.h32 { width:182px; height:32px; background-color:#FFD800; }
div.h22 { width:182px; height:22px; background-color:#FF4E00; }
div.h31 { width:182px; height:31px; background-color:#6601FF; }
</style>
<div class="header">
<div class="w604"></div>
<!---whitespace-->
<div class="w182">
<div class="h32"></div>
<div class="h22"></div>
<div class="h31"></div>
</div>
<div class="w29"></div>
</div>
</body>
</html>
You forgot to add px to the end of your CSS width/height declarations.
And with some reformatting of the floats, I came up with this:
http://jsfiddle.net/4gddY/.
Still trying to figure out the problem with the spacing between the horizontal images.
EDIT: Setting the images to display: block worked. http://jsfiddle.net/4gddY/1/
Here is the CSS:
body{
background: white;
font-family: Arial, Helvetica, sans-serif;
color:#7d806c;
font-weight: bold;
}
#container{
width: 1000px;
margin:0 auto;
outline: 1px dashed red;
}
#leftimage{
width:604px;
height: 85px;
float: left;
}
#rightimage{
width: 211px;
height: 85px;
margin: 25px 0 0 auto;
}
#verticalimage{
width:29px;
height:85px;
float:left;
}
#horizontalimages{
width:182px;
height:85px;
margin-left: auto;
}
img {
display: block;
}
i dont know how u want to display your header images
but on my guesses
you have try this
<div id="horizontalimages">
<img src="Images/image3.jpg" alt="" width="182" height="32" /><br />
<img src="Images/image4.jpg" alt="" width="182" height="22" /><br />
<img src="Images/image5.jpg" alt="" width="182" height="31" /><br />
</div>