PDA

View Full Version : Resolved invisible border



Jahren
Oct 7th, 2009, 05:00 PM
hi guys,

I need to know how to set an invisible border of 1px to a div.
I have a div where hovering over it makes a 1px solid border appear
Tho I want to prevent the shifting effect by setting an invisible solid border to the div

thanks

edit: it is necessary to mention that the division has auto margin so the border makes it shift

Excavator
Oct 7th, 2009, 05:04 PM
Hello Jahren,
Can we see your code?

An invisible 1px border could be margin:1px; if you wanted to do it on purpose.

Jahren
Oct 7th, 2009, 05:06 PM
alright


<div class='reponses'>
<div class='portraits'>
<div class='portrait'>
PORTAIT 1
</div>
<div class='portrait'>
PORTAIT 2
</div>
<div class='portrait'>
PORTAIT 3
</div>
</div>
</div>

//css
html, body{width:100%; height:100%; margin:0; padding:0;}

.reponses{width:58%; min-height:310px; margin:5px auto 0 auto; position:relative;}
.portraits{width:100%; padding:10px 0 10px 0;}
.portrait{width:15%; height:125px; margin:10px 2% 0 2%; float:left; border:1px hidden black; cursor:pointer;}
.portrait:hover{border:1px dotted black;}

Excavator
Oct 7th, 2009, 05:13 PM
Try these making changes:
html, body{width:100%; height:100%; margin:0; padding:0;}
.reponses{width:58%; min-height:310px; margin:5px auto 0 auto; position:relative;}
.portraits{width:100%; padding:10px 0 10px 0;overflow: auto;}
.portrait{width:15%; height:125px; margin:1px; float:left; cursor:pointer;}
.portrait:hover{border:1px dotted black; margin: 0;}

Jahren
Oct 7th, 2009, 05:23 PM
that's about what I need but while keeping my liquid design. Those "portrait" divs could be dynamically inserted or removed. the border won't shift now but i've lost my centering effect.

here's the link to the full test page.
sondage - FRENCH ALERT (http://www2.recitfga.qc.ca/sondage/test.htm)

edit: hold on for the link.. slow host, uploading files.. :P
edit2: now its up

abduraooft
Oct 7th, 2009, 05:29 PM
here's the link to the full test page.
sondage - FRENCH ALERT

Not Found

The requested URL /sondage/test.htm was not found on this server.

Excavator
Oct 7th, 2009, 05:29 PM
Hmm, what's being centered? .portraits or the text inside it?

Jahren
Oct 7th, 2009, 05:32 PM
all portrait divs are centered positioned. text replaces future images ;)
Try hovering a portrait, you will notice the shifting effect I mentioned earlier

.portraits hold many .portrait holding a future image.
those many .portrait are centered based on the available space

Excavator
Oct 7th, 2009, 05:36 PM
Have a look with some colors to show what's going on. Also some other changes -
<!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>Untitled Document</title>
<style type="text/css">
html, body{
width: 100%;
height: 100%;
background: #ccc;
}
* {
margin: 0;
padding: 0;
border: none;
}
.reponses{
width: 58%;
min-height: 310px;
margin: 5px auto 0 auto;
background: #999;
}
.portraits{
width: 100%;
padding: 10px 0 10px 0;
}
.portrait{
width: 15%;
height: 125px;
margin: 1px;
padding: 10px 2% 0 2%;
cursor: pointer;
background: #fff;
}
.portrait:hover{
border: 1px dotted #f00;
margin: 0;
}
</style>
</head>
<body>
<div class='reponses'>
<div class='portraits'>
<div class='portrait'>
PORTAIT 1
</div>
</div>
</div>

</body>
</html>

abduraooft
Oct 7th, 2009, 05:43 PM
Here you go

.portrait {/*style.css (line 19)*/
border:1px solid #F1DA97;
cursor:pointer;
float:left;
height:125px;
margin:10px 2% 0;
width:125px;
} :thumbsup:

Excavator
Oct 7th, 2009, 05:47 PM
Oh, thats perfect.

Jahren
Oct 7th, 2009, 05:48 PM
i'm not sure this last bit of code helps.
try adding multiple portraits and you'll see that they are not inline. (which is why I make them float)

edit : or color hack could do it too. ehehe

alright it works for me.
but I still wonder why border:1px hidden; wont do what I except it to do

abduraooft
Oct 7th, 2009, 05:53 PM
but I still wonder why border:1px hidden; wont do what I except it to do
See http://www.w3schools.com/css/pr_border-style.asp

hidden The same as "none", except in border conflict resolution for table elements

Note: No versions of Internet Explorer (including IE8) support the property values "inherit" or "hidden".

Excavator
Oct 7th, 2009, 05:54 PM
Have a look at something similar - http://nopeople.com/CSS/thumbnail%20presentation/index.html

Jahren
Oct 7th, 2009, 05:54 PM
so what would I have done with a background image?

abduraooft
Oct 7th, 2009, 05:58 PM
so what would I have done with a background image?
Try

.portrait {
padding:1px;
cursor:pointer;
float:left;
height:125px;
margin:10px 2% 0;
padding:1px;
width:125px;
}
.portrait:hover {
border:1px dotted black;
padding:0;
}

Jahren
Oct 7th, 2009, 05:59 PM
makes sense. I believe it's better than color hack then.
thanks all!