i am trying to make a list of images ( image gallery ) and i found a source code and chage it , but i don't know how to change it so the images are set in an horizontal line : this is the code ( changed ) if anyone have any idea that would be great thank you in advance
<body>
<div id="ps_slider" class="ps_slider">
<a class="prev disabled"></a>
<a class="next disabled"></a>
<div id="ps_albums">
<div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album2/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album3/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album4/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album5/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album6/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album7/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album8/thumb/thumb.jpg" alt=""/></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/></div>
</div>
</div>
<div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
<a id="ps_close" class="ps_close" style="display:none;"></a>
<div id="ps_container" class="ps_container" style="display:none;">
<a id="ps_next_photo" class="ps_next_photo" style="display:none;"> </a>
</div>
body, ul, li, h1, h2, h3{
margin:0;
padding:0;
}
/* Image container style */
.ps_container{
width:480px;
height:350px;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-240px;
z-index:100;
}
.ps_container img{
border:1px solid #fff;
position:absolute;
top:50%;
left:50%;
-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
box-shadow:1px 1px 10px #000;
}
a.ps_next_photo:hover,
/* Thumbnail slider style */
.ps_slider{
width:845px;
height:300px;
position:relative;
margin:110px auto 0px auto;
}
.ps_slider a.next,
.ps_slider a.prev{
position:absolute;
background-color:#000;
background-position:center center;
background-repeat:no-repeat;
border:1px solid #232323;
width:20px;
height:20px;
top:20%;
margin-top:-10px;
opacity:0.6;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
cursor:pointer;
outline:none;
}
.ps_slider a.prev:hover,
.ps_slider a.next:hover{
border:1px solid #333;
opacity:0.9;
}
.ps_slider a.disabled,
.ps_slider a.disabled:hover{
opacity:0.4;
border:1px solid #111;
cursor:default;
}
.ps_slider a.prev{
left:-30px;
background-image:url(../images/prev.png);
}
.ps_slider a.next{
right:-30px;
background-image:url(../images/next.png);
}
.ps_slider .ps_album{
width:140px;
height:100px;
padding:10px;
background-color:#333;
border:1px solid #444;
position:absolute;
top:0px;
text-align:center;
cursor:pointer;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
-webkit-box-reflect:
below 5px
-webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.6, transparent),
to(rgb(18, 18, 18))
);
}
.ps_slider .ps_album:hover{
background-color:#383838;
}
.ps_slider .ps_album img{
height:90px;
border:1px solid #444;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.ps_slider .ps_album:hover .ps_desc{
background-image:none;
}
.ps_slider .ps_album .ps_desc span{
display:block;
margin:0px 10px 10px 10px;
border-top:1px solid #333;
padding-top:5px;
}
Try adding this to your CSS:
.ps_slider .ps_album {
float: left;
}
You can put them inside a table
<table>
<tr>
<td>image1 stuff</td>
<td>image2 stuff</td> // and so on
</tr>
</table>
Related
I want the div with the class "games" to encircle/wrap-around my para, so that every word breaks when it reaches the rounded corners and nothing is invisible.
How do I do that?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="metacore.css"/>
<link rel="stylesheet" href="../font-awesome-4.6.3/css/font-awesome.css" />
<style>
#gamesContainer {
margin-top:120px;
margin-bottom:100px;
}
.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:250px;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
}
.singleGame .gameName {
display:table;
color:black;
font-family:basics;
font-size:50px;
margin:0 auto;
margin-bottom:30px;
text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
}
#ourGames {
text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
color:black;
font-size:80px;
font-family:basics;
color:black;
margin-left:50px;
margin-bottom:120px;
padding-bottom:25px;
border-bottom:6px groove #464646;
box-shadow:0 2px 0 white,0 3px 0 grey;
}
.gameDescriptionBackground {
width:100%;
height:100px;
background-color:black;
opacity:.9;
position:absolute;
bottom:0;
}
.gameDescription {
width:80%;
height:100px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
overflow:hidden;
}
.gameDescriptionHeading {
color:white;
margin:0;
padding:0;
font-family:basics;
text-transform:uppercase;
text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
}
.gameDescriptionPara {
color:white;
text-transform:uppercase;
text-wrap:unrestricted;
font-family:basics;
font-size:13px;
padding-left:30px;
}
</style>
</head>
<body>
<div id="navBarContainer">
<ul id="topNav">
<li>Home</li>
<li>Games</li>
<li>About</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
<div id="gamesContainer">
<h1 id="ourGames">Our Published Games:</h1>
<div class="singleGame">
<h1 class="gameName">Vain Instinct</h1>
<div class="games" style="background:url('game1.jpg') -120px -50px">
<div class="gameDescriptionBackground"></div>
<div class="gameDescription">
<h2 class="gameDescriptionHeading">Best Selling Ios Game In 2017</h2>
<p class="gameDescriptionPara">This Was Our First Game, it revolves around the story of around the story of a band of teenagers survive the dangers of an environment where beast and man alike are your enemies, the game was named an example of excellent storytelling and a dramatic gaming experience</p>
</div>
</div>
</div>
</div>
<div id="socialContainer" >
<i class="fa fa-facebook" style="background-color:#3b5998;"></i>
<i class="fa fa-github" style="background-color:#212121;"></i>
<i class="fa fa-google" style="background-color:#d62d20;"></i>
<i class="fa fa-twitter" style="background-color:#2ba7e3;"></i>
<i class="fa fa-vk" style="background-color:#44678d;"></i>
</div>
<script>
</script>
</body>
</html>
Use padding on .games - play around with the value, depends on your content.
Change border radius with 50% like this border-radius:50%; & delete padding :0; on gameDescriptionHeading and than add padding:5%;
Work With jsfiddle
#gamesContainer {
margin-top:120px;
margin-bottom:100px;
}
.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:50%;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
padding-top:10%;
}
.singleGame .gameName {
display:table;
color:black;
font-family:basics;
font-size:50px;
margin:0 auto;
margin-bottom:30px;
text-shadow:0 1px 0 white,0 3px 0 grey,1px 4px 0 white;
}
#ourGames {
text-shadow:0 1.5px 0 white,0 4.5px 0 grey,1.5px 6px 0 white;
color:black;
font-size:80px;
font-family:basics;
color:black;
margin-left:50px;
margin-bottom:120px;
padding-bottom:25px;
border-bottom:6px groove #464646;
box-shadow:0 2px 0 white,0 3px 0 grey;
}
.gameDescriptionBackground {
width:100%;
height:100px;
background-color:black;
opacity:.9;
position:absolute;
bottom:0;
}
.gameDescription {
width:80%;
height:100px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
overflow:hidden;
}
.gameDescriptionHeading {
padding-left: 5%;
color:white;
margin:0;
font-family:basics;
text-transform:uppercase;
text-shadow:0 2px 0 black, 0 3px 0 grey,0 4px 0 black;
}
.gameDescriptionPara {
color:white;
text-transform:uppercase;
text-wrap:unrestricted;
font-family:basics;
font-size:13px;
padding-left:30px;
}
.games {
overflow:hidden;
width:65%;
height:450px;
border-radius:250px;
-webkit-filter:grayscale(100%);
margin:0 auto;
box-shadow:-30px 30px 30px 2px black inset;
position:relative;
/* THIS IS THE MISSING STYLE */
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
Just put some <br>'s in place. It will make a line break. So just put the <br>'s at the place where there should be a line break. And if you need a word to have some more distance from the side, put in some 's these will give you a space. Just like you hit the spacebar.
I hope this works.
I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}
you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>
I've been working on a new website with a modern-ish look. I wanted to have two columns inside of a single content div. However, after hours of trial and error with various bit of code I've found online, I come to no avail.
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Unnamed Website</title>
<link rel="stylesheet" href="../_css/websitename.css" type="text/css">
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
</div>
<div id="nav">
<ul>
</ul>
</div>
</div>
<div id="content">
<h2>Header Level Two</h2>
<div id="columnleft">
Hello
</div>
<div id="columnright">
Hello
</div>
</div>
<div id="footer">
<p>Copyright © 2013 BlahBlahBlah.com</p>
</div>
</div>
</body>
</html>
I honestly don't see anything wrong with the HTML. However, the CSS is where it gets confusing:
body{
background-color:#333333;
font-family:Helvetica;
}
div#wrap{
width:1000px;
height:auto;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
div#header{
width:980px;
height:130px;
margin-top:10px;
margin-right:auto;
margin-left:auto;
}
div#content{
background-color:#ffffff;
border-color:#ffffff;
border-width:1px;
border-style:solid;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
-o-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
-o-border-top-right-radius:5px;
width:950px;
height:auto;
margin-right:auto;
margin-left:auto;
padding:0 15px;
}
div#footer{
background-color:#eeeeee;
border-color:#eeeeee;
border-width:1px;
border-style:solid;
border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-o-border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-o-border-bottom-right-radius:5px;
width:980px;
height:40px;
margin-bottom:10px;
margin-right:auto;
margin-left:auto;
box-shadow:5px 2px 10px #333333;
clear:both;
}
#footer p{
text-align:center;
font-family:Helvetica;
font-size:13;
line-height:7px;
}
h2{
background-color:#35586c;
font-family:Helvetica;
font-weight:bold;
margin:15px auto;
padding:10px;
border-width:1px;
border-color:#0b0b5b;
border-style:solid;
border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
text-align:center;
box-shadow:0 0 1px #ffffff inset;
-webkit-box-shadow:0 0 1px #ffffff inset;
-moz-box-shadow:0 0 1px #ffffff inset;
-o-box-shadow:0 0 1px #ffffff inset;
text-shadow:1px 0 2px #222222;
color:#fbfffb;
}
div#columnleft{
width:200px;
height:auto;
background-color:#35586c;
font-family:Helvetica;
font-weight:bold;
margin-top:15px;
margin-bottom:15px;
margin-right:15px;
padding:10px;
border-width:1px;
border-color:#0b0b5b;
border-style:solid;
border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
text-align:center;
box-shadow:0 0 1px #ffffff inset;
-webkit-box-shadow:0 0 1px #ffffff inset;
-moz-box-shadow:0 0 1px #ffffff inset;
-o-box-shadow:0 0 1px #ffffff inset;
text-shadow:1px 0 2px #222222;
color:#fbfffb;
float:left;
}
div#columnright{
width:710px;
height:auto;
background-color:#ffffff;
font-family:Helvetica;
margin-top:15px;
margin-bottom:15px;
float:right;
text-align:justify;
}
Whenever I load up the page, the maincontent div doesn't expand with the column-divs inside it. I would like to stray away from table as much as possible so I can have better customization with each column, and I wouldn't like to use the tag. Is there any way I can fix this?
give your #content div the class="clearfix"
css like this
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* IE < 8 */
}
here is an working example
http://jsfiddle.net/delueg/u8zvV/
the reason why it behave like this is that whenever you float elements... the parent-container loose the ability to expand corresponding to its children... that is what clearfix is for.. it clears the floats in other words..
I'm having some problems positioning a logo (img) on my site. I want it to be centered at all times and window sizes. At the same time, I want it to overlap/spillover in the bottom of the div it's in.
It's placed in the div main and I want it to go over the div called nav. I haven't had any problems making it overlap, but it simply won't stay centered!
Any suggestions?
CSS
body {
width:100%;
font-family: Cusmyr, sans serif;
font-size:2em;
margin:0em;
}
#font-face {
font-family:Cusmyr;
src: url('font/myriadproregot.otf'), url('font/myriadproregsv.svg'), url('font/myriadproregtt.ttf');
}
#nav {
background:#ffffff;
width:100%;
height:4em;
margin-top:-18px;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:2%;
margin-left:10%;
margin-right:10%;
margin-top:5%;
}
#nav a {
display:block;
width:20%;
margin-right:0% auto;
padding-left:0% auto;
color:#5E09CB;
text-decoration:none;
}
.clear {
clear:both;
}
#logo {
position: absolute;
}
#main {
width:100%;
position:relative;
border-top: 0.1em solid #000000;
}
#main img {
margin-bottom:-0.1em;
padding:0em;
}
#text-left p {
position:absolute;
color:#ffffff;
padding-left:8%;
padding-top:8%;
letter-spacing:0.1em;
line-height:1.1;
}
#text-right p {
position:absolute;
color:#ffffff;
padding-left:75%;
padding-top:8%;
letter-spacing:0.1em;
line-height:1.1;
}
#enter {
display:block;
position:absolute;
width:7em;
height:1.5em;
bottom:5%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background-color:#39895B;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
}
#enter a {
position:absolute;
text-align:center;
font-size:1em;
line-height:0.0em;
color:#ffffff;
margin-top:0.8em;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-decoration:none;
}
#donations p {
position:absolute;
color:#ffffff;
font-size:0.65em;
text-align:left;
margin-bottom:10%;
left:1%;
width:12em;
}
#donations {
position:relative;
width:100%;
height:8em;
background-color:#333334;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
#donations a {
display:block;
position:absolute;
text-align:center;
font-size:0.8em;
width:6em;
padding:0.2em;
height:1.1em;
bottom:8%;
left:10%;
right:0;
background-color:#5E09CB;
color:#ffffff;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
text-decoration:none;
}
.dontime p {
position:absolute;
text-decoration:underline;
float:right;
right:0;
width:15em;
top:-3%;
margin-right:1%;
color:#ffffff;
font-size:0.65em;
}
.meter {
height:20px;
width:30%;
position:relative;
background:#555;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:3px;
margin-top:1%;
left:1%;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color:#5E09CB;
background-image: -moz-linear-gradient(top, #8959c6, #5E09CB);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8959c6),color-stop(1, #5E09CB));
background-image: -webkit-linear-gradient(#8959c6, #5E09CB);
}
#gallery {
position:relative;
margin-top:0em;
width:100%;
padding-bottom:5em;
background-color:#ffffff;
border-top:0.1em solid #000000;
overflow:hidden;
}
#gallerytext p {
color:#DACB29;
text-align:center;
margin-top:4%;
}
#kranz img {
display:block;
margin-top:-5%;
margin-left:auto;
margin-right:auto;
}
#pic1 img {
display:block;
float:left;
margin-left:10%;
margin-top:-7%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic2 img {
display:block;
float:left;
margin-left:10%;
margin-top:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic3 img {
display:block;
float:left;
margin-left:10%;
margin-top:-7%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic4 img {
display:block;
float:left;
margin-top:22%;
margin-left:-80%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic5 img {
display:block;
float:left;
margin-top:35%;
margin-left:-50%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic6 img {
display:block;
float:left;
margin-top:22%;
margin-left:-20%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic7 img {
display:block;
float:left;
margin-top:50%;
margin-left:-85%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic8 img {
display:block;
float:left;
margin-top:60%;
margin-left:-55%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#pic9 img {
display:block;
float:left;
margin-top:55%;
margin-left:-25%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
.clock {
position:absolute;
right:-1.5%;
bottom:1%;
width:25em;
}
.clock_days {
margin-right:0.5%;
float:left;
}
.clock_hours {
margin-right:0.5%;
float:left;
}
.clock_minutes {
margin-right:0.5%;
float:left;
}
.clock_seconds {
margin-right:0.5%;
float:left;
}
.bgLayer {
background-image:url(img/bg.png);
background-repeat:no-repeat;
position:relative;
}
.topLayer {
position:absolute;
background-image:url(img/top.png);
width:6em;
height:6em;
margin-bottom:5%;
background-repeat:no-repeat;
}
.text { position:absolute; top:5%; left:5%; width:10%; height:10%;}
.val {
font-family:Myriad Pro;
font-size:47px;
font-weight:bold;
color:#FFF;
text-align:right;
line-height:2em;
margin-top:2%;
width:10%;
}
.type_days {
font-family:Myriad Pro;
color:#ff6565;
width:3%;
text-align:center;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_hours {
font-family: Myriad Pro;
color:#378cff;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_minutes {
font-family: Myriad Pro;
color:#9cdb7d;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
.type_seconds {
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
color:#ffdc50;
width:3%;
text-align:right;
font-size:13px;
line-height:1.5em;
font-weight:bold;
text-transform:uppercase;
}
#entergal a {
position:absolute;
text-align:center;
font-size:1em;
line-height:0.0em;
color:#ffffff;
margin-top:0.8em;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-decoration:none;
}
#entergal {
display:block;
position:absolute;
width:7em;
height:1.5em;
bottom:2%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background-color:#39895B;
-moz-box-shadow: 0px 3px 14px #000000;
-webkit-box-shadow: 0px 3px 14px #000000;
box-shadow: 0px 3px 14px #000000;
border-radius:3px;
-moz-border-radius:3px;
}
#social {
position:relative;
width:100%;
height:4em;
background-color:#5E09CB;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
.table {
display:table;
margin:0 auto;
}
#social ul {
list-style-type:none;
padding-left:30%;
padding-right:30%;
}
ul#sociallist {
min-width:17em;
list-style:none;
padding-top:none;
}
ul#sociallist li {
display:inline;
}
#foot {
position:relative;
width:100%;
padding-bottom:0.5em;
background-color:#333334;
margin-top:-1%;
border-top:0.1em solid #000000;
overflow:hidden;
}
.tablefoot {
display:table;
margin:0 auto;
}
#foot ul {
list-style-type:none;
padding-left:30%;
padding-right:30%;
}
ul#footnav {
min-width:25em;
padding-top:none;
list-style:none;
padding-left:25%;
}
ul#footnav li {
display:inline;
padding:0.5%;
}
#foot a {
text-decoration:none;
color:#1D88B5;
}
#copy-text p {
text-align:center;
color:#FFFFFF;
font-size:0.5em;
}
#create-text p {
text-align:center;
color:#1D88B5;
font-size:0.25em;
}
The html
<body>
<div id="nav">
<ul>
<li><img src="images/thumb.png" alt="thumb" width="100px" />COMPETE</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />SCORE</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />SHOP</li>
<li><img src="images/thumb.png" alt="thumb" width="100px" />MORE</li>
</ul>
</div>
<div class="clear"> </div>
<div id="main">
<div id="logo"> <img src="images/logorz.png" alt="logo" width="180px" /> </div>
<div id="text-left">
<p><strong>Good cause<br />marketplace<br />for limited<br />art-pieces</strong></p>
</div>
<div id="text-right">
<p><strong>... produced by<br />the most<br />creative crowd<br />out there</strong></p>
</div>
<div id="enter"> Enter contest </div>
<img src="images/front-img.png" alt="gallery images" width="100%" />
</div>
<div id="donations">
<div class="meter orange nostripes"> <span style="width:31.99%"></span> </div>
<p><strong>$7.678</strong> of <strong>$24,000</strong> donated this month<br />
This month's donations will help streetdogs in<br />
Bulgaria to find new owners!</p>
<div class="wrapper">
<div class="clock">
<!-- Days -->
<div class="clock_days">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_days" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_days">Days</p>
</div>
</div>
</div>
<!-- Days -->
<!-- Hours -->
<div class="clock_hours">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_hours" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_hours">Hours</p>
</div>
</div>
</div>
<!-- Hours -->
<!-- Minutes -->
<div class="clock_minutes">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_minutes" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_minutes">Minutes</p>
</div>
</div>
</div>
<!-- Minutes -->
<!-- Seconds -->
<div class="clock_seconds">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_seconds" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_seconds">Seconds</p>
</div>
</div>
</div>
<!-- Seconds -->
</div>
More info
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<p>This week's<br />heroes</p>
</div>
<div id="kranz"> <img src="images/kranz.png" alt="kranz" width="310px" /> </div>
<div id="pic1"> <img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" /> </div>
<div id="pic2"> <img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" /> </div>
<div id="pic3"> <img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" /> </div>
<div id="pic4"> <img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" /> </div>
<div id="pic5"> <img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" /> </div>
<div id="pic6"> <img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" /> </div>
<div id="pic7"> <img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" /> </div>
<div id="pic8"> <img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" /> </div>
<div id="pic9"> <img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" /> </div>
<div id="entergal"> Enter contest </div>
</div>
<div id="social">
<div class="table">
<ul id="sociallist">
<li><img src="images/cam.png" alt="camera link" height="40%" /></li>
<li><img src="images/facebook.png" alt="facebook link" height="40%" /></li>
<li><img src="images/twitter.png" alt="twitter link" height="40%" /></li>
<li><img src="images/youtube.png" alt="youtube link" height="40%" /></li>
</ul>
</div>
</div>
<div id="foot">
<div class="tablefoot">
<ul id="footnav">
<li><strong>Compete</strong></li>
<li><strong>Score</strong></li>
<li><strong>Shop</strong></li>
<li><strong>More</strong></li>
</ul>
</div>
<div id="copy-text">
<p><strong>Copyright © 2012 Artwork Heroes, Inc. All photos © their respective owners</strong>
<p>
</div>
<div id="create-text">
<p><strong>Created with Scandinavian love in Copenhagen, Denmark</strong></p>
</div>
</div>
</body>
</html>
If you want to center an absolutely positioned image you can do it like this:
#logo {
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
}
Replace the width with the logos actual width and the negative left margin is half that width.
If you want it centered regarding its parent the parent should be relatively positioned.
I am using HTML5 doc-type. I have created a span tag and given the text color as red but it is not applying anything to span when I run the page. But the miracle is it is working in jsfiddle http://jsfiddle.net/r9bP8/2/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{margin:0; padding:0; }
.wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left}
header{
display:block; padding:0 125px;
background-color: #007DC4; text-align:center;
overflow:auto
}
header a:first-child{float:left; padding:15px 0}
header a:last-child{float:right; padding:15px 0}
.logo{ padding-top:8px ; display:inline-block }
.container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
-webkit-box-shadow: 2px 2px #e1e1e1, -2px 0 2px #e1e1e1;
-moz-box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
}
.home_menu{
width:500px; margin:0 auto; overflow:auto; position:relative
}
.test{ padding:35px 50px; width:150px; display:inline-block; float:left}
.test a{
width:150px;
float:left; line-height:150px;
background-color:#0091ce ;
border-radius:6px; text-align:center; vertical-align:middle;
}
.test span{
color:#F66
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<fhj
fh
gj
</header>
<div class="container">
<div class="home_menu">
<div class="test">
<img src="images/channels.jpg" width="59" height="60" alt="channels" style="vertical-align:middle" /><span>test</span></div>
<div class="test"><img src="images/.jpg" width="64" height="73" alt="" style="vertical-align:middle" /><span>uspan</span></div>
<div class="test"><img src="images/.jpg" width="99" height="78" alt="" style="vertical-align:middle" /><span>htu</span></div>
<div class="test"><img src="images/.jpg" width="76" height="49" alt="" style="vertical-align:middle" /><span>ggg</span></div>
<div class="test"><img src="images/.jpg" width="71" height="68" alt="" style="vertical-align:middle" /><span>tehhhst</span></div>
<div class="test"><img src="images/.jpg" width="70" height="68" alt="" style="vertical-align:middle" /><span>bgfg</span></div>
</div>
</div>
</div>
</body>
</html>
Why is it not working while running the page?
As per my comments, I removed two question marks that had appeared on the test a and test span closing braces when I copied it. (Possible character encoding issue?)
I also added in omitted semi-colons and a type for the stylesheet.
<style type="text/css">
body{margin:0; padding:0;}
.wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left;}
header{
display:block; padding:0 125px;
background-color: #007DC4; text-align:center;
overflow:auto;
}
header a:first-child{float:left; padding:15px 0;}
header a:last-child{float:right; padding:15px 0;}
.logo{ padding-top:8px ; display:inline-block; }
.container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
-webkit-box-shadow: 2px 2px #e1e1e1, -2px 0 2px #e1e1e1;
-moz-box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
}
.home_menu{
width:500px; margin:0 auto; overflow:auto; position:relative;
}
.test{ padding:35px 50px; width:150px; display:inline-block; float:left;}
.test a{
width:150px;
float:left; line-height:150px;
background-color:#0091ce;
border-radius:6px; text-align:center; vertical-align:middle;
}
.test span{
color:#F66;
}
</style>
it's default get NOW you set own EDIT
Styling Links
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Text Decoration
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}