/    Sign up×
Community /Pin to ProfileBookmark

Need to recreate the image

Copy linkTweet thisAlerts:
Apr 08.2005

Hi,

I need to recreate the image that I’m posting. I was trying to utilize <p class> within a <div> and <span class> within the <p> but couldn’t do it. I also want the links to be rollover (change to different color on hover). Please post CSS and HTML, thanks. This is what I have so far:

This is for the text:

[CODE]
.test {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 0px;
margin-top: 8px;
margin-left: 8px;
}
[/CODE]

and this is for the container:

[CODE]
position:absolute;
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;
[/CODE]

[upl-file uuid=9eda2ccb-3112-43c0-a957-a97600c6d9c5 size=21kB]4webDeveloper1.jpg[/upl-file]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Apr 09.2005 — It's just a couple of headings and a couple of lists in a div.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Conforming HTML 4.01 Transitional Template&lt;/title&gt;
&lt;style type="text/css"&gt;
#container {
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;
padding: 1em;
}
#container h3 {
font-family: sans-serif;
font-weight: normal;
margin-bottom:0;
}
#container ul {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 2em;
list-style: none;
margin:0; padding:0;
}
#container a {
text-decoration: none;
color: #666;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;h3&gt;Links&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;www.link1.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;www.link1.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;www.link1.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;www.link1.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;www.link1.com&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Addresses&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;1234 Test Drive&lt;/li&gt;
&lt;li&gt;1234 Test Drive&lt;/li&gt;
&lt;li&gt;1234 Test Drive&lt;/li&gt;
&lt;li&gt;1234 Test Drive&lt;/li&gt;
&lt;li&gt;1234 Test Drive&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@jamesx521authorApr 09.2005 — Thanks, it works fine by itself. Though, I have another problem; when I put the code in my page the Address text gets wrapped down like this:

1234 Test

Drive

1234 Test

Drive

..and so on.

I changed the point size to 10pt., tried fixing it with padding, margins and indentation, but couldn't fix it.

I also included in the container: "position: absolute;" so the container is placed where I want it. But, with Mozilla, the container appears about 50 pix. wider. How can I resolve these problems? Thanks.
Copy linkTweet thisAlerts:
@ray326Apr 09.2005 — You must have something else in your page that's changing the dimensions of the UL or the LI if the DIV is staying the same size. I see absolutely no difference in size between IE and FF except the tiny change from the box model. BTW, it's best to size with something other than pt.s for the screen.
×

Success!

Help @jamesx521 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...