I am a graphic designer(freelance) using css to build a page of images it is 3 columns and 5 rows, the page works fine and when you resize the browser it goes down to 2 columns and then 1 column, the only problem is that the columns snap top the left of the browser , when i want them to remain in the center. I have looked at a few methods from here but could not get any to work. I am new to CSS layouts but not HTML. I am trying to do this without bootstrap as i want to learn CSS as i did with HTML.
here is a link to the page i am trying to build
Here is the code i am using , i am not sure if it is right...thanks`
<style type="text/css">
body {
background-color: #F3F3F3;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
#center {
display: block;
position: relative;
top: -12px;
width: 169px;
margin: auto;
}
#wrapper {
display: block;
border: 2px;
border-color: #FF30;
margin-left: auto;
margin-right: auto;
min-width: 340px;
max-width: 1040px;
}
</style>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1" />
<title>Kieron Livingstone</title>
</head>
<div id="center">
<img src="img/page/tagname2.gif" width="169" height="28">
</div>
<div id="wrapper">
<img src="img/ns_o.jpg" name="shaman_nike" width="340" height="200" border="0">
<img src="img/mos.jpg" name="Image11" width="340" height="200" border="0">
<img src="img/bo.jpg" name="Image12" width="340" height="200" border="0">
<img src="img/nw.jpg" name="Image13" width="340" height="200" border="0">
<img src="img/n_f.jpg" name="Image14" width="340" height="200" border="0">
<img src="img/s.jpg" name="Image15" width="340" height="200" border="0">
<img src="img/fr.jpg" name="Image17" width="340" height="200" border="0">
<img src="img/n_o.jpg" name="Image16" width="340" height="200" border="0">
<img src="img/h_f.jpg" name="Image18" width="340" height="200" border="0">
<img src="img/ztm.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/gg.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/1234.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/bab.jpg" name="Image19" width="340" height="200" border="0">
<img src="img/nm.jpg" name="Image19" width="340" height="200" border="0">
</div>
</body>
</html>
The issue is that there's not anything centering the content of your wrapper div at the moment. It just happens to look OK when the viewport's width is >= 1040px because 3 images that are 340px wide fill it up completely, and your margin-left: auto and margin-right: auto take care of centering the wrapper div in the window.
If you add
text-align: center;
to
#wrapper
{
...
}
then that will take care of centering the things inside your wrapper div.
Related
Notice that the image isn't flushed to the top, instead it has a gap. It looks fine on all emails, but on iPhones I'm getting this to happen. How can I fix this on iPhone emails?
Here is the inlined code for the container divs:
<!DOCTYPE html>
<html>
<head>
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1" />
</head>
<body style="padding:0;">
<div class="email-background" style="background: #eee;padding: 10px;">
<div class="email-container" style="max-width: 600px;background: white;background-image: url(body_textur_bkg.jpg);font-family: Helvetica, sans-serif; margin: 0 auto; overflow: hidden; border-radius: 5px; display:block; padding: 0px;">
<a href="https://www.youtube.com/">
<img src="thankyou_header_link.jpg" style=" max-width:100%;vertical-align: top;"></a>
<h1 class="name" style="margin: 40px;font-size: 25px;text-align: left;color: #666;line-height: 1.5;">
[CANDIDATE_NAME],.....
Not sure if you need the rest of the code, but I can post if needed.
Try this piece of code to see if it fixes it:
<!DOCTYPE html>
<html>
<head>
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1" />
</head>
<body style="padding:0;">
<div class="email-background" style="background: #eee;padding:0px 10px;">
<div class="email-container" style="max-width: 600px;background: white;background-image: url(body_textur_bkg.jpg);font-family: Helvetica, sans-serif; margin: 0 auto; overflow: hidden; border-radius: 5px; display:block; padding: 0px;">
<a href="https://www.youtube.com/">
<img src="thankyou_header_link.jpg" style=" max-width:100%;vertical-align: top;border:0px; display:block;"></a>
<h1 class="name" style="margin: 40px;font-size: 25px;text-align: left;color: #666;line-height: 1.5;">
[CANDIDATE_NAME],.....
Let me know if it fixes it.
Cheers
I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.
<html>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
#media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
The CSS isn't working because its not contained with-in style tags.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
#media (min-width:641px) {
body {
background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;
}
}
</style>
</head>
<body>
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
For one, you're missing a <style> tag around your media query there. Also, I'd recommend against using inline styles (i.e. style="" attribute tags in your HTML). Keep all your CSS in one place, preferably a separate CSS file you can link to in your head tag.
Also, make sure you keep your media queries declared after your other CSS for those selectors. Whatever comes last will take precedent!
**I got text in a div after 10 the margin works with it but for some reason the padding does not work. So if someone could tell me what is wrong??? It is a html5 taskbar/10 images in a row which i comment out when needed. **
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Waylon's Unturned</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="../img/logo.jpg">
<nav><ul>
<nav><ul>
<li>Home</li>
<li class="active">Donate</li>
<li>Forum</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>About donations</h2>
</header>
<content>
<p>Thank you for considering a donation, all of the donations will be used to improve the server, website and forum.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BF766GY6YY8XN">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="0" height="0">
</form>
</content>
<h1><center><tt><b>Our Donation Goal :</b></tt></center></h1>
<p>We try to get 30 euro's each month to keep all of our servers, the website and the forums running.</p>
<div class="taskbardiv">
<img class="taskbar" src="../img/loadingbarblack.png" width="1" height="40">
<!--<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">-->
<p class="taskbarp">0% Complete</p>
</div>
</article>
</div>
</body>
</html>
CSS3:
.taskbarp{
color: #82a213;
float: right;
font-size: 5;
padding-left: 20px;
margin: 10;
}
.taskbar{
border-radius: 5px;
}
.taskbardiv{
background: black;
border-radius: 10px;
padding-top: 6px;
}
I'll try to help, although I don't know if I really understand your question:
Always use measurements (like px, em or %) when working in CSS! Your font-size as well as your margin are missing them, so they will simply be ignored by the browser.
Both paddings work as expected but padding-left doesn't make much sense when you're floating the text to the right side of the container.
That's all I can see for now, hope that helps you.
I am having some trouble with some very basic html. I am trying to center embedded video to the center of the tv screen image. the whole code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">
body {
background-color: #000;
}
#test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
margin-top:-925px;
margin-left:-13px;
}
</style>
</head>
<body>
<div class="test"> <div align="center">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</body>
<div id="video"><div align="center"> <iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The main problem is when you zoom in or out, the video no longer centers to the TV screen image. Please help me position the video and background image to not move when zooming or resizing the window.
test is a class, so it is .test
prefer div video as
position:absolute;
you forgot the closing tag of class "test"
This is the whole code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">
body {
background-color: #000;
}
.test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
position:absolute;
top:14.5%;
left:47.5%;
}
</style>
</head>
<body>
<div class="test"> <div align="center">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</body>
<div id="video">
<iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
if you want to center your element there are many ways, one of this is below..
<div class="wrapper">
<div class="videoWrapper">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
</div>
</div>
.wrapper {
float:left;
width:100%;
}
.videoWrapper {
width:500px; /* set your own width */
margin:auto;
}
If your background image has a fixed size you can position #video absolutely.
jsFiddle
#video {
position:absolute;
left:577px;
top:166px;
}
Note that in my fiddle I cleaned up your HTML removing the redundant elements.
<div class="test">
<img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
<div id="video">
<iframe src="http://player.vimeo.com/video/62981335?title=0&byline=0&portrait=0&color=0d0d0d&autoplay=1&loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
Use "center" tag to put keep your video to center
and also you can set top margin as per screen resolution by following script
<script type="text/javascript">
$(document).ready(function(){
var height = (($(window).height()) / 2) - 50;
$('.video').css('top', height );
});
<scrript>
I have this:
<html>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<style type='text/css'>
body {
background-color: #000;
}
</style>
</head>
<body>
<img src="1.jpg" height="100%" style="float: left;" />
<img src="2.jpg" height="100%" style="float: left;" />
<img src="3.jpg" height="100%" style="float: left;" />
<img src="4.jpg" height="100%" style="float: left;" />
</body>
</html>
This is big images. But my browser show me two images side by side and next in a new line.
I want to disply it all in one line. How to do it?
Stop floating the images and set white-space: nowrap on the body or some other wrapper element.
body {
white-space: nowrap;
}
and:
<body>
<img src="1.jpg" height="100%" />
<img src="2.jpg" height="100%" />
<img src="3.jpg" height="100%" />
<img src="4.jpg" height="100%" />
</body>
Demo: http://jsfiddle.net/ambiguous/4Udam/
Just set really big value to body width:
body {
width:5000px;
}
But this will introduce horizontal scrolling, you should know, that people hate to scroll horizontally. Why do you not use some kind of lightbox effect?
Apply clear: left to your images as well.
<img src="1.jpg" height="100%" style="float: left;" />