You are viewing our Forum Archives. To view or take place in current topics click here.
HTML/CSS Help Needed?
Posted:
HTML/CSS Help Needed?Posted:
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
Hi, I've been making this Website and I've had trouble with Text moving about when the Browser is Re-Sized; I've managed to sort out the Majority of the Text but there is certain Text that has certain Styles which make it like an Overlay and I've tried everything to stop it moving but it still does. Does anyone know how to fix this.
Website: [ Register or Signin to view external links. ]
CSS Code for Overlay:
Problematic Text:
Try making the Window smaller on the Main Page you'll see what I mean.
Last edited by OmniDesigns ; edited 1 time in total
Website: [ Register or Signin to view external links. ]
CSS Code for Overlay:
p.Torso {
width:1220;
margin-left: 20px;
position: absolute;
z-index: 100;
float:left;
font-size:18px;
font-family:Georgia, "Times New Roman", Times, serif;
color: #333;
text-align:left;
font-weight:bold
}
width:1220;
margin-left: 20px;
position: absolute;
z-index: 100;
float:left;
font-size:18px;
font-family:Georgia, "Times New Roman", Times, serif;
color: #333;
text-align:left;
font-weight:bold
}
Problematic Text:
Try making the Window smaller on the Main Page you'll see what I mean.
Last edited by OmniDesigns ; edited 1 time in total
#2. Posted:
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
To stop the text overlapping just change the position from 'absolute' to 'relative'. This will mean the torso tag displays relative to the other elements with the same parent rather than overlapping them.
This should resolve your issue, if not just reply back. Though try not to use absolute positioning, as like you said it can display differently on different resolutions, unless you know what you're doing with it.
This should resolve your issue, if not just reply back. Though try not to use absolute positioning, as like you said it can display differently on different resolutions, unless you know what you're doing with it.
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
iyop45 wrote To stop the text overlapping just change the position from 'absolute' to 'relative'. This will mean the torso tag displays relative to the other elements with the same parent rather than overlapping them.Thanks for trying, It did stop the Text moving but it messed up my layout a bit. Check out the Site. Any chance you could figure out why that happens. I tried removing all the <br>'s I used but it resulted in the same look. I don't see why there is such big Spacing there is no code telling it to do that.
This should resolve your issue, if not just reply back. Though try not to use absolute positioning, as like you said it can display differently on different resolutions, unless you know what you're doing with it.
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Ah, I see your problem >< The layout does seem to be very messy but after playing around with it a bit here is what I got it to (Zoomed 67%):
[ Register or Signin to view external links. ]
It seems to now work with resizing of the window and zooming in and out etc.
Is that how you wanted it to look? I removed some elements (you could add them back) and I have to say try and avoid positioning <p> tags as they aren't really supportive on that, same for img tags too.
Also I didn't really see the point in all those breaks, you really should drop that habit as it can lead to problems later on (as it has). But, I digress; If that is how you wanted it to look I can send over the altered markup.
[ Register or Signin to view external links. ]
It seems to now work with resizing of the window and zooming in and out etc.
Is that how you wanted it to look? I removed some elements (you could add them back) and I have to say try and avoid positioning <p> tags as they aren't really supportive on that, same for img tags too.
Also I didn't really see the point in all those breaks, you really should drop that habit as it can lead to problems later on (as it has). But, I digress; If that is how you wanted it to look I can send over the altered markup.
- 0useful
- 0not useful
#5. Posted:
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
Status: Offline
Joined: Dec 11, 201014Year Member
Posts: 212
Reputation Power: 18
iyop45 wrote Ah, I see your problem >< The layout does seem to be very messy but after playing around with it a bit here is what I got it to (Zoomed 67%):Yh, I'm pretty Novice at the moment so I just did what I had to do to make it how I wanted which as you saw caused a few problems further down the road. I would really appreciate if you sent over the Altered Markup. And thanks for all your help.
[ Register or Signin to view external links. ]
It seems to now work with resizing of the window and zooming in and out etc.
Is that how you wanted it to look? I removed some elements (you could add them back) and I have to say try and avoid positioning <p> tags as they aren't really supportive on that, same for img tags too.
Also I didn't really see the point in all those breaks, you really should drop that habit as it can lead to problems later on (as it has). But, I digress; If that is how you wanted it to look I can send over the altered markup.
- 0useful
- 0not useful
#6. Posted:
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
I sent all the files in a PM, but please do check again that they look and work right first.
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.