Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-25-2011, 07:42 PM   PM User | #1
pafell
New to the CF scene

 
Join Date: Nov 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
pafell is an unknown quantity at this point
Fixed-positioned div overlaying text when resizing window

Hello!

This is my first post on this forum and I hope I have followed all regulations and guidelines ;)

Anyway, I have a certain problem with my website.

It features one fixed div with an image in it ("Pawel Glaz" on the right). The idea was that I wanted that div to stay in place, all the time.

The problem, however, is that when user resizes the window greatly, or (which is more likely) views that page on a mobile device, that div overlaps the rest of the text. Try resizing your browser window either from right or left.

You can view the CSS code for that website here. Below I extract the part of code responsible for handling that fixed div:

#1
Code:
/************/
/*** MENU ***/
/************/

(...)

#myname
{
position: fixed;
top: 5px;
right: 15px;
z-index: 2;
width: 349px;
height: 90px;
}
What I would like to do is to set some absolute, minimum width of the page so when users resizes the window and reaches it, window will present a scrollbar but will not allow any overlay like this. I have somehow achieved it on my website with that white box where text is located. It will make a scrollbar appear as soon as you resize the browser window to that box's width and will not allow any more changes to the layout. I would like to extend that "protective bubble" to a width where my fixed divs would not screw up my layout :P

As you possibly have noticed by now, I am not a professional coder - that layout took me quite a lot of time to create so please treat me as an amateur when providing your answers. I might as well learn something new, apart from just fixing my issue :-)


Thanks in advance!
pafell is offline   Reply With Quote
Old 11-26-2011, 11:54 AM   PM User | #2
pafell
New to the CF scene

 
Join Date: Nov 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
pafell is an unknown quantity at this point
No one knows how to do it? :(
pafell is offline   Reply With Quote
Old 11-26-2011, 12:27 PM   PM User | #3
obenns
New Coder

 
Join Date: Nov 2011
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
obenns is an unknown quantity at this point
Unfortunately as an amateur it is tricky. Read up on responsive design.

From a design point of view, you really, REALLY don't want a horizontal scroll if you can help it (If I have understood your intentions correctly) .
obenns is offline   Reply With Quote
Reply

Bookmarks

Tags
fixed, overlay, positioning, text

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:51 PM.


Advertisement
Log in to turn off these ads.