- This topic is empty.
-
AuthorPosts
-
March 13, 2011 at 11:15 pm #31998ArkitektParticipant
I have a website I have been creating that is up and running and doing a pretty nice job so far. I have one small problem however, that i think will only really be a problem for people with smaller screens. I have a list of links wrapped into a div on the left side of the screen. The problem is, when you resize the window and shrink the window down, the div containing the external links overlaps the conent area div and text. How can i make the div with the external links never overlap the content div?
the website is here: http://ksalumnimsu.org/
my CSS for the side-links div is here below:
#side-lnks {
width: 56px;
text-align: center;
background: #FFF;
height: auto;
position: fixed;
display:table;
margin-left:auto;
margin-right:auto;
top: 50%;
margin-top: -140px;
}
#side-lnks a img{
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #000;
}
#side-lnks a:hover img{
overflow: hidden;
padding: 8px;
background-color: #F5F5F5;
}
My HTML for the side links is this:
A little help would be much appreciated. I have read that it has something to do with the positioning of the div, but i have tried several things to no avail.
Thanks in advance.
March 14, 2011 at 8:09 am #55632ercMemberThink of your problem another way. What you want is for your page layout to never shrink to smaller than the width of your content plus the left links.
To accomplish that, you could contain your current layout inside of a new div. Call it “wrapper” for example:
...
...
...
...
Then give the wrapper id a min-width that’s large enough to contain the left links and the content without any overlapping.
#wrapper { min-width: 1200px; }
That way, as you shrink the window, your layout will refuse to get any smaller than 1200px, giving your left links enough space to exist without sitting on top of your content.
March 14, 2011 at 10:16 am #55633ArkitektParticipantTHANKS! Really appreciate it. I have no idea why this was such an issue for me…. I simply couldn’t figure it out…. Figured it was something simple.
Both solution are very usable. In this case i like Erc’s method for this site, but I can foresee many cases in the future where wolfcry’s would work well for me.
Thanks for taking time to look at this guys… I knew nothing about web design and CSS a year ago, but steadily i am making progress.
Thanks,
Clark
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.