My page renders incorrectly (not how I want) on the first load, then when refreshed is correct. It's has to do with the "display:inline-block" I think. I've done a lot of research but I can't seem to figure this one out. And yes.... I've cleared my cache before loading it, I get the same result.
first load:
after refresh:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="ribbon-start"></div>
<div id="ribbon-shade"></div>
<div id="banner">
<div id="titles">
<div id="name">The Person</div>
<div id="profession">Their Profession</div>
</div>
<div class="tip"></div>
<div class="nav-butts">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div> <!-- header -->
<div style="height:900px; width:1px"></div><!-- SCROLL TEST -->
<div id="footer">
<div id="toTop">^</div>
</div> <!-- footer -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryeasing.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<script type="text/javascript" src="js/behaviour.js"></script>
</body>
</html>
and the CSS
body{
background-color:#00FFFF;
}
#ribbon-start{
z-index:-2;
position:absolute;
top:10px;
left:0px;
width:49px;
height:100px;
background-color:#181818 ;
}
#ribbon-shade{
z-index:-1;
position:absolute;
top:10px;
left:25px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-right:24px solid #909090 ;
}
#banner{
margin:21px 0 0 17px;
width:90%;
height:100px;
background-color:black ;
-webkit-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
}
#titles{
display:inline-block;
}
#name{
margin: 0 0 0 80px;
font-size:84px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#profession{
margin: 0 0 0 10px;
font-size:34px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#banner .tip{
display:inline-block;
margin: 0 -49px 0 0;
float:right;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}
.nav{
margin:0 0 0 17px;
width:90%;
height:100px;
}
.nav-butts{
display:inline-block;
padding:8px 8px 8px 8px;
background-color:black;
border-radius:38px;
margin:8px 0 0 0;
float:right;
}
.circle{
margin:5px 8px 0 8px;
display:inline-block;
height:60px;
width:60px;
background-color:white;
border-radius:30px;
}
.sticky {
margin-top:10px;
position: fixed;
left:-8px;
top:-8px;
z-index: 100;
border-top: 0;
}
.sticky .nav-butts{
-webkit-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
}
#toTop{
position:fixed;
text-align:center;
left:10%;
bottom:-15px;
height:60px;
width:70px;
font-size:64px;
background-color:black;
font-family: 'RalewayThin', sans-serif;
color: white;
border-radius:20px;
cursor:pointer;
}
#font-face
{
font-family: RalewayBold;
src: url('fonts/Raleway-Bold.otf');
}
#font-face
{
font-family: RalewayLight;
src: url('fonts/Raleway-light.otf');
}
It worked fine for me on the first load. I have worked with php in the past and found that an error appears underneath at the first load but disappears at the second load. Try different browsers. One may just be acting up.
I've included this line
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
This clears the problem but isn't really the answer to this question. This code makes the browser call for the styles instead of using cached ones for every load, I believe.
Related
I'm developing my first web application using Google App Engine. Now, while the core backend program is working and ready, I'm having some trouble working with the UI of the website. Now, the width of my website is extending beyond the given screen, which I do not want.
You can see the live version of the site here:
http://deploymentapp.appspot.com/
Now, the site is still under development, please pardon my terrible try at web designing for now.
As can be seen from the site, the width of the whole site is extending beyond the screen width.
Here's the HTML code:
<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
margin:0px;
padding:0px;
}
body
{
width:100%;
background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
background-position: top center;
background-repeat:no-repeat;
}
input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}
#form
{
position:relative;
left:730px;
top:300px;
}
</style>
</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>
<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</form>
</body>
</html>
Also, I have copied most of the CSS from another source.
How can resolve this problem?
Your problem lies in #form.
Your left won't always be the right amount.
You need to use % instead of px.
This is called responsive web design.
If you want it non-obstructing the quora logo, I seem to have fixed it by changing left to 50%
You need to turn your css to be responsive.
Instead of using px in #form, just use % like this:
#form {
margin-top:300px;
margin-left:55%;
}
There is a nicer way to have the same result. It's to float the form to the right and set a margin-right.
#form {
float:right;
margin-right:15%
margin-top:300px;
}
Behind responsive there is much more then this, if you want to read more start from this link: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TheGelu - Coming Soon</title>
<style type="text/css">
body {
background: #474747 url(http://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
}
p.margin {
margin-left:300px;
}
p.box {
margin-left:300px;
}
h1 {
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
boxy {
border: 0px solid #db9b20;
text-align: center;
background-color: #f0f0f0;
padding: 0px 0px 0px 0px;
margin: 4px 0px 4px 0px;
moz-box-shadow: 5px 5px 5px #000;
-moz-border-shadow: 0pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
-webkit-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
}
</style>
</head>
<body><h1><center>TheGelu *-*</center></h1>
<p class="margin"><img src="RoundRound.png" alt="" width="136" height="137" /><img src="arrowSignal.png" alt="" width="318" height="126" /></p><div style="width:400px;height:300px;float:right;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#FFFFFF;-webkit-box-shadow: #000000 2px 2px 2px;-moz-box-shadow: #000000 2px 2px 2px; box-shadow: #000000 2px 2px 2px;">Pretty Text Here!</div>
</body>
</body>
</html>
And I want the box to be exactly next to the arrow (on the right). How can I do that? I've tried float but I don't know how to put it up.
Live version at http://thegelu.bl.ee/test.html
Is this what you want?
1. p.margin, add float:left;
2. text box div, also add float:left;
Done.
Edit:you mean like this?
Because your arrow uses an image and that image has a transparent background that is wider than the image itself.
Solutions:
1. modify your image and remove the blank space
2. no need to modify image, just add margin-left:-90px; to your text box div
You can move the div in your p.margin and specify on it style="display: inline-block".
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 trying to create a simple image link button that when I move my mouse on it, it gets a bit larger.
I managed to do it with this simple code below but now I just want to move also the paragraph when the image is getting larger..
Any hints on how I can select and move the paragraph when I hover over the image?
<div id="rightImage">
<img src="images/image.jpg" alt="image" onmouseover="this.className='mouseOver'" onmouseout="this.className='mouseOut'" />
<p>paragraph</p>
</div>
#rightImage
{
width:275px;
height:275px;
float:left;
position:relative;
}
.mouseOver
{
width:300px;
height:300px;
top:-40px;
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
.mouseOut
{
width:275px;
height:275px;
float:left;
margin-right:52px;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
This enlarges the image, increases the size of the shadow and keeps the <p> element visible.
(EDIT: I forgot to encode the angled braces around the p)
Perhaps it's what you need?
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#rightImage
{
height:275px;
float:left;
position:relative;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
#rightImage:hover img
{
height: 300px;
box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
}
</style>
</head>
<body>
<div id="rightImage">
<img src="img/redBaron.jpg" alt="image"/>
<p>paragraph</p>
</div>
</body>
</html>
Remove position:absolute
.mouseOver
{
width:300px;
height:300px;
z-index:1;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
Demo http://jsfiddle.net/aRv2M/2/
Try this. I hope it works for you.
<div id="rightImage">
<img src="images/image.jpg" alt="image" width="275px" height="275" />
<p>paragraph</p>
</div>
use this css
#rightImage{
width:275px;
height:275px;
float:left;
position:relative;}
#rightImage:hover{
width:300px;
height:300px;
top:-40px
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;}
#rightImage:hover p {
position:relative;
margin-top:30px;}
I have a site and I want to use .less instead of .css but I have a problem with border radius, if I copy the same code into a css file work in .less doens.'t work, It doesn't take my radius and the div is rectangular. I have used a compiler and It gives me 0 error. I don't know if is a problem of compatibility. this is my code that doesn't work in less but in
css work:
.colLeft{
position:absolute;
top:0;
left:0;
background:#fff;
height:100%;
width:24%;
z-index:0;
}
.colCenter{
position:absolute;
top:0;
left:18%;
height: 100%;
width: 68%;
background: #ccc;
border-left: 1px solid #333;
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
z-index:100;
overflow:hidden;
-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;
box-shadow: 1px 1px 1px #000;
}
.colRight{
position:absolute;
top:0;
left:81%;
background:#fff;
height:100%;
width:18%;
z-index:1000;
border-left: 1px solid #333;
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}
Html:
<div class="colLeft" id="one">
</div>
<div class="colCenter" id="two">
<div class="content">
<div class="img_background">
<img src="img/sfondi/<?php echo (basename($_SERVER['HTTP_REFERER'],'.php')); ?>.jpg" alt="" class="old_img"/>
</div>
</div>
</div>
</div>
<div class="colRight" id="three">
index
NEXT
</div>
border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
should be
border-radius: 50px 0px 0px ~"50px / 250px" 0px 0px 250px;
otherwise you get a division.
Less is in the process of introducing a policy of only doing division inside brackets so that valid css is unaltered, but this will be in a future release (e.g. maybe 1.4.0)