Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Css positioning


  • Please log in to reply
6 replies to this topic

#1 JUICYboy

JUICYboy

  • Members
  • 537 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Anaheim, Ca
  • Local time:01:26 PM

Posted 26 April 2011 - 10:26 AM

I know I have talked about it before but I can't seem to get this right on all monitor resolutions.

I am working on a project and I have been trying to "align" the top of my mockup.html page to look the same on all monitors, O.S. and browsers.

I try not to position with the property absolute: ("It does not look the same on all browsers some browsers will have the position way of, while others have it were I want it.")
However when I do relative it wont allow me to change position by % only by px, or em.
And the last thing when I use the relative property and position from the left (or right) it creates a scroll bar at the bottom..

Which I think has something to do with the widths....

Can a veteran give me some advice....

Here is the link to all the sources: http://www.mytemplate.uphero.com/

BC AdBot (Login to Remove)

 


#2 JUICYboy

JUICYboy
  • Topic Starter

  • Members
  • 537 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Anaheim, Ca
  • Local time:01:26 PM

Posted 26 April 2011 - 10:28 AM

What I want to do is to align the content so it is "straight" I know it can be done, but I need some help :wacko:

#3 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:11:26 AM

Posted 26 April 2011 - 06:34 PM

Which parts specifically are you trying to align? There is a graphic in the upper left corner, text in the upper right, and a menu bar.

#4 JUICYboy

JUICYboy
  • Topic Starter

  • Members
  • 537 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Anaheim, Ca
  • Local time:01:26 PM

Posted 26 April 2011 - 08:55 PM

Thanks Mr.Groovicus...

I am trying to align:

1)The graphic (logo) to "sit" on the LEFT side of the menu bar.

2)The links "Store locations |etc.." on the RIGHT side of the menu bar.

3)The slide show Below the menu bar.

I have accomplished that however it does not look align in different monitors, and browsers.

Example: On my laptop the page looks align but if you look at it from my desktop with my monitor the graphic(logo) is almost in the center of the page the links are towards the end of the page, and the slide show is to the right side of the menu bar not below it.

Maybe because of absolute positioning, but if I put it in relative it crates a scroll bar below the page (horizontal) which is not desired in this case. :busy:

Edited by JUICYboy, 26 April 2011 - 08:57 PM.


#5 JUICYboy

JUICYboy
  • Topic Starter

  • Members
  • 537 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Anaheim, Ca
  • Local time:01:26 PM

Posted 26 April 2011 - 09:14 PM

My logo and links are position: absolute;

So that is why they look different in browsers and monitors with different resolutions....
So I can fix that by adding position: relative; than it will adjust itself to the structure of the page.....

The problem is a scroll bar appears in the bottom of the page when I do that...
How can I eliminate that scroll bar if I go relative? :o

#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:11:26 AM

Posted 27 April 2011 - 09:41 AM

Probably should start by validating your HTML.

#7 iHeartMalware

iHeartMalware

  • Members
  • 15 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:12:26 PM

Posted 29 April 2011 - 08:02 AM

I'm not sure if you have resolved this issue yet but I have a suggestion. One of the things I do when developing websites I want to position elements on is to reset the css. All browsers seem to have a default margin, padding for common elements (like p and ul) that can really make positioning a pain between different browsers. Below is a link to the CSS I use to reset my elements. You will need to explicitly set margins, fonts and font weights after using this for elements like p and strong.

http://developer.yahoo.com/yui/reset/

Hope this helps.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users