I have a problem with positioning my layout and scrollbox.

Page 1 of 1

5 Replies - 418 Views - Last Post: 07 July 2012 - 06:47 PM

#1 Snowbelle01  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-July 12

I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 09:38 AM

I am using my dad's computer, which has a large screen resolution. And in that screen, my layout is all misplaced!
Here's how it looks with that resolution;

Posted Image

Sorry if the handwriting is bad, but it shows where everything should go. They are transparent scrollboxes.
Anyways, on my other computer, with a smaller but average screen has my site looking great and is in placed. But that's in a smaller screen. How do I make the layout position right in a larger screen?

Oh, and here's my site; http://www.mintbelle.weebly.com/ and the browser I was using was google chrome.

Is This A Good Question/Topic? 0
  • +

Replies To: I have a problem with positioning my layout and scrollbox.

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3043
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 09:49 AM

The problem there is that the two content divs are absolute positioned to be exactly at those two positions, while the image (or rather the div that contains it) is positioned to be at the center of the screen. That means that the image will never be in the correct position except on screens exactly the same size as the one you were using to write this.

The simple solution to this is to just change the position of the image so that it's also absolutely positioned to be behind the content divs.
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 09:54 AM

This is definitely a nightmare website. First of all you have two things going on here which are in conflict. You have one div that contains your squirrel guy and his orange box. The second div has your welcome and scrollbox.

Since these are two separate divs, they need to be made as one so they fit together as a unit.

So move your welcome and scroll box out of "content" and move it into the same div as the other elements. Next, make that whole div have a position of "relative". Since you are positioning your scrollbox and welcome using absolute, their container needs to be relative so that the absolute positioning is in relation to the relative container, not the overall screen.

Then it is just a matter of adjusting their "left" properties. From what I can the scrollbox should have a left of "35px" and the welcome have a left around "125px".

But even with all this the screen proportions are massively out of shape. Everything is way too small and hard to read. Don't be afraid to make things much larger. Fonts with 10pt (about 1em) are good and don't be afraid to add some whitespace between elements.

:)

This post has been edited by Martyr2: 07 July 2012 - 09:56 AM

Was This Post Helpful? 1
  • +
  • -

#4 JackOfAllTrades  Icon User is online

  • Saucy!
  • member icon

Reputation: 5667
  • View blog
  • Posts: 22,515
  • Joined: 23-August 08

Re: I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 09:56 AM

Moved to HTML & CSS
Was This Post Helpful? 0
  • +
  • -

#5 Snowbelle01  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-July 12

Re: I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 04:16 PM

I took out the squirrel guy's text box, so now it's just a box. So I'll work on it later. Anyways, I am still confused. All I need to do is to make the site look good in all resolutions.

Here's my code for the scrollbox.

<div style="position:absolute; top:85px;left:385px;
width:  205px; height: 221px; background: #transparent; border-color: #000000; border-width: 0px; border-style: solid; color: #000000; font-size: 10; font-family: Arial; overflow: auto;text-align:left; font-weight:bold;">
<a href="http://mintbelle.weebly.com"></a>

My content goes in here..

</div>


Sorry if I look stupid or if I stress you out i'm just really confused.
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3043
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: I have a problem with positioning my layout and scrollbox.

Posted 07 July 2012 - 06:47 PM

OK, first things first. Piling that many CSS styles into the HTML tag's "style" attribute is borderline criminal. For the sake of the sanity of everybody involved, please place your styles into a <style> tag in the <head>, or use an external CSS style.

A minimal example of how that works:

index.html
<!DOCTYPE html>
<html>
<head>
	<title>External CSS Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>
<body>
	<h1 id="mainHeader">External CSS Example</h1>
	<p class="centered">This is an example</p>
</body>
</html>


my_styles.css
@charset "UTF-8";

body {
	font-size: 1em;
	font-family: Ubuntu, Arial, sans;
}
#mainHeader {
	font-size: 250%;
}
p.centered {
	text-align: center;
}


If you don't understand how the CSS styles are applied to your elements, you need to read up on CSS selectors. - There are plenty of tutorials available if the docs I linked to aren't what you want.

View PostSnowbelle01, on 07 July 2012 - 11:16 PM, said:

All I need to do is to make the site look good in all resolutions.

Then you need to understand the different types of position values. Based on what you've posted so far it's pretty clear that you don't actually understand the differences between them. I suggest you study this a bit further.

Try reading though these two pages. That should help.
- MDN - CSS position
- http://www.barelyfit...ss/positioning/
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1