/    Sign up×
Community /Pin to ProfileBookmark

Positioning a container/box????

Hi everyone,
i have the following code to form a container and cards in it. As you can see the container is not EXACTLY attached to the left and top. What is the reason for those gaps. Can we get rid of them, so that we can make the container attached to the top lets say?


[upl-file uuid=ae0c2175-19c4-4b7c-9ed0-aec6767a6f7d size=902B]cardlar.txt[/upl-file]

to post a comment

4 Comments(s)

Copy linkTweet thisAlerts:
@gpm1982Nov 23.2007 — You need to add one more stylesheet:
padding: 0px;
margin: 0px;
Copy linkTweet thisAlerts:
@hmtpnauthorNov 23.2007 — Thanks, it helped a lot
Copy linkTweet thisAlerts:
@WebJoelNov 24.2007 — Glad to see that you are still playing around with this one. ?

-Let's have some more fun with this... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<html xmlns="http://www.w3.org/1999/xhtml">


<style type="text/css">

* {padding:0; margin:0;}

#container {position:relative; width: 500px; height:395px; border:1px solid #000; background:#000; }

.card1, .card2, .card3, .card4, .card5 {position: absolute; background:#454545; border:1px solid #000; width:130px; padding:3px; height:230px; color:#fff; padding:10px; }

.card1 {margin:120px 0 0 20px;}

.card2 {margin:95px 85px;}

.card3 {margin:70px 170px;}

.card4 {margin:45px 245px;}

.card5 {margin:20px 330px;}

a.card1:visited, a.card2:visited, a.card3:visited, a.card4:visited, a.card5:visited {background-color:white; z-index:1000; color:black;}

a.card1:hover, a.card2:hover, a.card3:hover, a.card4:hover, a.card5:hover {background-color:red; z-index:1000; color:white}

a.card1:active, a.card2:active, a.card3:active, a.card4:active, a.card5:active {background-color:silver; z-index:1000; color:blue}




<div id="container">

<h2 style="position:absolute; left:20px; top:10px; color:white;">Container Box</h2>

<h2 style="position:absolute; right:20px; bottom:10px; color:white;">Container Box</h2>

<a href="#" class="card1">

first card is this card</a>

<a href="#" class="card2">

second card can be this card right here</a>

<a href="#" class="card3">

third card is just like the other cards</a>

<a href="#" class="card4">

fourth card come next, after the third card</a>

<a href="#" class="card5">

fifth card is the last card of the deck</a>



Copy linkTweet thisAlerts:
@gpm1982Nov 26.2007 — Glad to see that you are still playing around with this one. ?

-Let's have some more fun with this...[/QUOTE]

Nice ?

It's kinda interesting to see something interactive which requires no JavaScript at all.


Help @hmtpn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,