Jump to content

min window width


Tandino

Recommended Posts

hi everyone. I have just finished my very first site as an amateur freelancer, but one bug remains that I can't figure out. on the index page, there are two, 2x2 boxes that point users into the 2 main sections of the site. they are properly spaced when the browser resolution is high, but when viewing in a smaller window, the 2 boxes overlap. check it out: www.artexarte.eu/I made the boxes with divs, each one has a different background image. here is the relevant css:

body { 	background-color: darkkhaki; min-width: 1200px;      /* 2x LC width + RC width */ }#fboxes{position:absolute; top: 100px; left: 150px;}#aboxes{position:absolute; top: 100px; right: 150px;}	.menu {width: 400px;}	.menu a {display:block; height:200px; width:200px;}	.menu a.ftl {background-image: url("./images/1.jpg")}	.menu a.ftr {background-image: url("./images/2.jpg")}	.menu a.fbl {background-image: url("./images/3.jpg")}	.menu a.fbr {background-image: url("./images/4.jpg")}	.menu a.atl {background-image: url("./images/5.jpg")}	.menu a.atr {background-image: url("./images/6.jpg")}	.menu a.abl {background-image: url("./images/7.jpg")}	.menu a.abr {background-image: url("./images/8.jpg")}	.menu a:hover,#menu a:active {background-position: -200px 0}		.box {float: left; width: 200px; }#index_titles{color: #864825; font-size: large;}

the 2x LC and RC width is for the "Opere" section, where each decade is arranged in 3 columns. the body width is the only piece that the two pages share, however.

Link to comment
Share on other sites

Review Floats, margins, paddings to overcome this problem. Absolute positioning is the culprit here. The right hand Box is spaced from the right hand side of the screen. When the screen is made smaller, the offset from the right hand border does chan ge, so there is the overlap effect.

Link to comment
Share on other sites

thanks jlhaslip, your helped me solve the problem. I read up again on the relevant css and changed a few things. I first replaced the right:100 with a left: 650, this worked, but then I realized that I could even do some extra things. I nested the second divsion of boxes (aboxes), inside fboxes. Now neither 2x2 box overlaps, and moving them is a snap, since I only have to reposition the fboxes div, aboxes will follow it.thanks very much for the guidance.heres the new css:

#fboxes{position:absolute; top: 15%; left: 10%;} #aboxes{position:absolute; top: 0; left: 550px;}	 .menu {width: 400px;}	 .menu a {display:block; height:200px; width:200px;}	 .menu a.ftl {background-image: url("./images/1.jpg")}	 .menu a.ftr {background-image: url("./images/2.jpg")}	 .menu a.fbl {background-image: url("./images/3.jpg")}	 .menu a.fbr {background-image: url("./images/4.jpg")}	 .menu a.atl {background-image: url("./images/5.jpg")}	 .menu a.atr {background-image: url("./images/6.jpg")}	 .menu a.abl {background-image: url("./images/7.jpg")}	 .menu a.abr {background-image: url("./images/8.jpg")}	 .menu a:hover,#menu a:active {background-position: -200px 0}		 .box {float: left; width: 200px; }

in the html, I nested aboxes inside of fboxes. voila! beautious

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...