khan1992
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by khan1992
-
-
can css be used to do something like that as im not very competent with javascript
-
ive been trying to keep a div enlarged however once i stop hovering over it it reverts back to original leaving a nasty white gap which i want to plug.
sort of like what they have on this website http://www.rdio.com/
where they display the albums.
This is what ive managed to do
<!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">.rollinfotray { height: 400px; width: 1000px; background-color: #FFF;}.infobox1 { background-color: #333; height: 400px; width: 200px; float:left; overflow:hidden;}.infobox1:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-color: #09F;}.infoboxtitle { font-family: impact; text-transform: uppercase; font-size: 36px; margin-left: 5px; width: 400px;}.infobox2 { background-color: #666; height: 400px; width: 200px; float: left;}.infobox2:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;background-color: #09F;}.infobox3 { background-color: #999; height: 400px; width: 200px; float: left;}.infobox3:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-color: #09F;}#container { background-color: #333; width:1000px; }.infocontent { float: left; width:199px; height:400px;}</style></head><body><div id="container"><div class="rollinfotray"><div class="infobox1"><div class="infoboxtitle">sdopksdos</div><div id="infocontent"></div><div id="infocontent">sdsids9d09isd09isdsdsdsdsdsdsdsd</div></div><div class="infobox2">jiodosijdoeS</div><div class="infobox3"></div><div class="infobox1"></div></div></div></body></html>
-
Yeh thanks that seemed to do the trick around all the divs but now theres gaps between the divs
<!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><style></style></head><body><div class="header"> <p>stuff</p> <p> </p></div><div class="content1"> <p>stuff</p> <p> </p></div><div class="content2"> <p>stuff</p> <p> </p></div><div class="content3"> <p>stuff</p> <p> </p> <p> </p> <p> </p></div><div class="footer"> <p>stuff</p> <p> </p></div></body></html>
@charset "utf-8";html, body, header,content1,content2,content3,footer { margin: 0; padding: 0;}.header { background-color: #FFF; margin: 0; padding: 0;}.content1 { background-color: #333; }.content2 { background-color: #06F;}.content3 { background-color: #999;}.footer { background-color: #CCC;}
-
Every time i build a website i always get mysterious borders appearing. Heres the code i have
<!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><style>.body{ margin: 0px; padding-bottom: none; }</style></head><body><div class="header">stuff</div><div class="content1">stuff</div><div class="content2">stuff</div><div class="content3">stuff</div><div class="footer">stuff</div></body></html>
so i always end up doing trial and error and changing padding and what not. Can someone give me a surefire method to avoid this
CSS3 Columns
in CSS
Posted
I am having trouble keeping my content within the divs or sorted in column. They seem to be ever expanding.
I have tried have 3 divs with each set 400px each set to float within a 1200px container. and thought this would contain them but they appear in one line. Also tried using the css3 columns but that is also doing the same thing. I have no idea where i went wrong?
This is the HTML
And related CSS