13 replies [Last post]
semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

Hi folks, this is a first attempt at CSS so I'm hoping the fix is a simple one. Wink You can view the result HERE but I can summarize the three issues I'm having:

  1. my CONTENT container is overshooting its border, and that in turn is affecting the appearing of the border itself: notice that the right edge of LOGO is probably where the inside edge of the border should be, although I'm guessing. The point is, they need to line up (just as on the left side).
  2. in Explorer the border is just completely f'd up: entire portions of it just drop off. No idea what's going on here; it doesn't happen in Firefox tsk.
  3. lastly (and this is an easy question) I recall learning some years ago about a way to force my page to occupy the entire available screen — the absolute top and absolute left/right of the screen, in other words. Put another way, I don't want any white space peeking around the edges of my page.

Thanks for any help; the code appears below.

semicodin

<style type="text/css">
 
body {margin: 0; background-image: url(<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg" rel="nofollow">http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg</a>);
background-color: #CDCDC1;}
 
body,td,th {font-family: Arial; font-size: medium; color: #000000;}
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
a:link {color: #009900; text-decoration: none;}
a:visited {color: #009900; text-decoration: none; color: #000000;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
 
#CONTENT {float: center; margin-top: 6em; width: 80%; margin-left: 10%; margin-right: 10%;}
#CONTENT div img {width: 100%;}
 
#LOGO {float: left; width: 100%;}
#LOGO div img {width: 80%;}
 
 
</style>
</head>
 
<body>
 
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CONTENT">
<div style="border: 30px solid #CDCDC1;">
 
<div id="LOGO">
<div style="background-color: #FFFFFF; padding: 2%; border: 3px solid #000000; text-align: left;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div>
 
 
<div style="width: 86%; background-color: #F3F1E5; padding: 7%; border: 3px dashed #000000; text-align: left;">
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
<br>
<br>
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC2.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
</div>
</div>
</div>
<!-- Closing CONTENT -->

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi semicodin Quote: #CONTENT

Hi semicodin

Quote:

#CONTENT {float: center;

center is not a valid value for float.

HTML, body{
border:0; 
padding:0;}
Should get rid of the space around the page.

Try setting position:relative to fix the messed up borders

div{position:relative;}

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

Hey Tony, okay I cleaned up

Hey Tony, okay I cleaned up the first two, but I'm uncertain where position:relative should go. I've tried it in CONTENT . . . LOGO . . . and both CONTENT+LOGO but it doesn't have any effect.

Thank you so much for this forum btw. So glad I found it. Cool

body {margin: 0; border: 0; padding: 0; background-image: url(<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg" rel="nofollow">http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg</a>);
background-color: #CDCDC1;}
 
body,td,th {font-family: Arial; font-size: medium; color: #000000;}
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
a:link {color: #009900; text-decoration: none;}
a:visited {color: #009900; text-decoration: none; color: #000000;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
 
#CONTENT {position: relative; margin-top: 6em; width: 80%; margin-left: 10%; margin-right: 10%;}
#CONTENT div img {width: 100%;}
 
#LOGO {float: left; width: 100%;}
#LOGO div img {width: 80%;}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

It'd most likely to do with

It'd most likely to do with floats but could be element in and around them causing the problem.
I'd just try it as
div{position:relative;}
If that doesn't work we will have to look at something else.

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

Yes, position:relative

Yes, position:relative doesn't work. I also contemplated just making CONTENT one big frame and then seating two DIVS inside it instead of incorporating the text as part of CONTENT. But I just thought it was so much more graceful to define it as what I intended it to be -- a border -- instead of a layer that sits behind the content and because its width is greater than the two DIVs it contains, shows up as a border incidentally. I might have to just do it that way but it seemed kinda crude to me lol.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Did you try combining: <div

Did you try combining:

<div id="CONTENT">
<div style="border: 30px solid #CDCDC1;">

So getting rid of the second div and adding the border to content.

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

I'm not sure I'm following

I'm not sure I'm following you. CONTENT already has the border. The problem is LOGO.

I also just remembered why I ultimately decided against a layered approach: the nice thing about assigning the border to CONTENT is that it neatly contains both the top and bottom edges, as well as left and right.

So the border approach is really what I'm after here. I just don't understand why LOGO doesn't stretch completely.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Try this: <!DOCTYPE HTML

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<title>&hellip;/ohTHAT/bracket &loz;L&Xi;NKS&loz; for semicodin&rsquo;s rough, crude, and probably incorrect C&sigmaf;&sigmaf; markups.</title>
 
 
 
<style type="text/css">
 
 
 
body {margin: 0; background-image: url(<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg" rel="nofollow">http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg</a>);
 
background-color: #CDCDC1;}
 
 
 
body,td,th {font-family: Arial; font-size: medium; color: #000000;}
 
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
 
a:link {color: #009900; text-decoration: none;}
 
a:visited {color: #009900; text-decoration: none; color: #000000;}
 
a:hover {text-decoration: none;}
 
a:active {text-decoration: none;}
 
 
 
#CONTENT {border: 30px solid #CDCDC1; margin-top: 6em; width: 80%; margin-left: 10%; margin-right: 10%;}
 
#CONTENT div img {width: 100%;}
 
 
 
 
 
#LOGO div img {width: 80%;}
 
 
 
 
 
</style>
 
</head>
 
 
 
<body>
 
 
 
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
 
<div id="CONTENT">
 
 
 
 
 
<div id="LOGO">
 
<div style="background-color: #FFFFFF; padding: 2%; border: 3px solid #000000; text-align: left;">
 
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
 
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
 
</div>
 
</div>
 
 
 
 
 
<div style=" background-color: #F3F1E5; padding: 7%; border: 3px dashed #000000; text-align: left;">
 
<br>
 
<br>
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
 
felis. Aliquam sit amet felis. Mauris semper,
 
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
 
nisl in quam. Etiam augue pede, molestie eget,
 
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
 
odio sagittis blandit. Maecenas at nisl. Nullam
 
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
 
wisi. Ut ante dui, aliquet nec, congue non, accumsan
 
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
 
venenatis. Suspendisse cursus velit vel ligula.
 
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
 
suscipit. Aenean quis risus sit amet eros volutpat
 
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
 
<br>
 
<br>
 
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
 
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC2.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
 
<br>
 
<br>
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
 
felis. Aliquam sit amet felis. Mauris semper,
 
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
 
nisl in quam. Etiam augue pede, molestie eget,
 
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
 
odio sagittis blandit. Maecenas at nisl. Nullam
 
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
 
wisi. Ut ante dui, aliquet nec, congue non, accumsan
 
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
 
venenatis. Suspendisse cursus velit vel ligula.
 
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
 
suscipit. Aenean quis risus sit amet eros volutpat
 
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
 
</div>
 
 
 
</div>
 
<!-- Closing CONTENT -->
 
 
 
</body>
 
</html>

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

This was a huge improvement

This was a huge improvement Tony, thanks. It introduces two new issues however, which in fairness to you I hadn't yet raised. Crazy

You can see from the latest version 9998 that the first line of Lorem ipsum has inherited the 6em margin from its parent. That's no good; I need to be able to assign the beginning of the text its own top margin.

The next issue is aesthetic, but it nonetheless matters: I'm trying to figure out a way to get LOGO to hang just low enough to cover up the top dash line, so as to render dash lines on only the remaining three sides. It's a tidying up matter, but I will need to do it.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Margin is not inherited, I

Margin is not inherited, I think it's the BR that are causing the space as well as the 7% padding..
Why just set the top border to none on the div with the dashed border.

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

Oh man (the BRs) do I feel

Oh man (the BRs) do I feel stupid lol. Indeed. I just realized however that I do need the 7%. And I'm good with that amount of space following LOGO, it gives the content uniformity.

Okay here's version 99997, now on to . . . Hide-A-Dash Crazy

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

Well I thought I'd try to be

Well I thought I'd try to be clever by using a negative margin on the bottom of LOGO but it didn't work. Drop the code in and you can see that it just eats into my padding. Sad(

<div id="LOGO">
<div style="margin-bottom: -5px; background-color: #FFFFFF; padding: 2%; border: 3px solid #000000; text-align: left;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Try this: border: 3px dashed

Try this:

border: 3px dashed #000000;
border-top:none;

semicodin
semicodin's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-8
Joined: 2010-02-28
Posts: 11
Points: 15

BRAVO.

Now that was so simple it should be illegal! Big smile Perfect.