Intersection Lines with text

CreativeMind · #1 02-17-2007, 10:33 AM

Hi there, I am trying to create a intersecting lines which will have text on all 4sides. I need to create a horizontal line and a vertical line to do this. I know so far that I need to create a GIF image to do this and I already did. I just need to know the codes on how this will layout.

Also, is there a way to turn columns into intersecting lines like what I am trying to do? Would it be easier to turn columns into interction lines or create a whole new coding? What would I use to create my intersecting lines, HTML or Javascript?

I have attached an example of the intersecting lines and an example of a column that I am trying to change into intersecting lines. Please me attached files for example.

Thanks!

coothead · #2 02-17-2007, 11:55 AM

Hi there CreativeMind,

and a warm welcome to these forums.

Maybe this basic example will help...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    font-family:sans-serif;
 }
#container {
    width:601px;
    margin:40px auto;
 }
#top_left {
    width:240px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    float:left;
 }
#top_right {
    width:360px;
    border-bottom:1px solid #000;
    float:left;
}
#top_left h1,#top_right h1 {
    font-size:26px;
    text-align:center;
 }
#bottom_left {
    clear:both; 
    width:240px;
    border-right:1px solid #000;
    float:left;
 }
#bottom_right {
    width:360px;
    float:left;
}
#bottom_left p,#bottom_right p {
    font-size:14px;
    margin:20px;
    text-align:justify;
 }
</style>

</head>
<body>

<div id="container">

<div id="top_left">
<h1>Handbags</h1>
</div>

<div id="top_right">
<h1>Sunglasses</h1>
</div>

<div id="bottom_left">
<p>
This is where there will be a paragraph about our finest
 purses and handbags at very affordable prices
</p>
</div>

<div id="bottom_right">
<p>
This is where there will be a paragraph about our stylish
 sunglasses and accessories at very affordable prices
</p>
</div>

</div>

</body>
</html>

coothead

CreativeMind · #3 02-17-2007, 12:30 PM

Coothead,

Thank you for your help. I have a few questions. How do adjust the Horizontal Line and the Vertical line as needed? When I continue to type more text, it overlapped the other text box. Is there a way to get around that? How do I adjust the Horizontal line and the Vertical line if need to adjust?

The last question I have is where do I copy and paste your codes into my existing page? I tried to do it and it got really screw up. Do I paste it inside a new table or the new layout cell? l am using Dreamweaver 8 tool.

Thanks!!

coothead · #4 02-17-2007, 01:10 PM

Hi there CreativeMind,

Quote:

How do adjust the Horizontal Line and the Vertical line as needed?

You need to adjust the CSS horizontal values to suit your requirements.
The vertical borders will adjust automatically.

Quote:

where do I copy and paste your codes into my existing page?

The CSS should be placed within the head section and the body content where it is required within the page.

Quote:

l am using Dreamweaver 8 tool.

I cannot comment on that as I hand code with...

NotePad.

coothead

CreativeMind · #5 02-17-2007, 01:33 PM

coothead,

When I add more text in the text area, it does not look right. It skips spaces. Please see the attached image.

Thanks!

coothead · #6 02-17-2007, 01:41 PM

Hi there CreativeMind,

to really be able to help you, we need to see your code or better still a link to the site.

From your image I can only guess that the space to which you refer is caused by the p element default margins.

coothead

CreativeMind · #7 02-17-2007, 03:49 PM

coothead,

I finally got the paragraph to work correctly. Is there a way to move the Sunglasses (hl) to the right a little (few pixels) because it is touching the center line? Also, is there a way to move both the Sunglasses and the Handbags down alittle (few pixels)? Below is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
font-family:sans-serif;
}
#container {
width:601px;
margin:40px auto;
}
#top_left {
width:240px;
border-right:1px solid #000;
border-bottom:1px solid #000;
float:left;
}
#top_right {
width:240px;
border-bottom:1px solid #000;
float:left;

}
#top_left h1,#top_right h1 {
font-size:26px;
text-align:left;
}
#bottom_left {
clear:both;
width:240px;
border-right:1px solid #000;
float:left;
}
#bottom_right {
width:240px;
float:left;
}
#bottom_left p,#bottom_right p {
font-size:11px;
margin:20px;
text-align:justify;
}
</style>

</head>
<body>

<div id="container">

<div id="top_left">
<h1>Handbags</h1>
</div>

<div id="top_right">
<h1>Sunglasses</h1>
</div>

<div id="bottom_left">
<p>
This is where there will be a paragraph about our finest
purses and handbags at very affordable prices, sdfjh jdsfh kj ksjdhf ksjdf kjsdf ksdjf sd fksjdf ksdf ksd fks ds df sd fs df sdf s dfs dfs df sd fs df sd fs df </p>
</div>

<div id="bottom_right">
<p>This is where there will be a paragraph about our finest
purses and handbags at very affordable prices, sdfjh jdsfh kj ksjdhf ksjdf kjsdf ksdjf sd fksjdf ksdf ksd fks ds df sd fs df sdf s dfs dfs df sd fs df sd fs df, dfsdf lksdjf l lsdkfj lkdjf </p>
</div>

</div>

</body>
</html>

When I viewed with Firefox browser, it seem to explode up a little. Is it the CSS that's not working properly? Please see attached file.

Thanks!

CreativeMind · #8 02-17-2007, 05:15 PM

Is anyone there? Hello.....

Don't leave me hanging.

coothead · #9 02-17-2007, 05:40 PM

Hi there CreativeMind,

add margin values to the h1 rule...

Code:


#top_left h1,#top_right h1 {
   font-size:26px;
   text-align:left;
   margin-left:20px;
   margin-bottom:10px;
 }

coothead

CreativeMind · #10 02-17-2007, 06:32 PM

coothead, your are sweet! Thanks my friend!!

coothead · #11 02-17-2007, 06:45 PM

No problem, you're very welcome.

CreativeMind · #12 02-19-2007, 05:24 PM

Coothead,

I need more help regarding this. Please see the picture examples that I am trying to do. I am trying to add arrow bullet heads and bold text on the bottom left side. Also, the bold text on the bottom left side does not work in Firefox browser. Please see the current CSS code:

<style type="text/css">
body {
font-family:sans-serif;

}
#container {
width:601px;
margin:10px auto;
}
#top_left {
width:130px;
border-right:1px solid #000;
border-bottom:1px solid #000;
float:left;
}
#top_right {
width:410px;
border-bottom:1px solid #000;
float:left;
}
#top_left h1,#top_right h1 {
font-size:17px;
text-align:left;
margin-left:7px;
margin-bottom:5px;
}
#bottom_left {
clear:both;
width:130px;
border-right:1px solid #000;
float:left;
}
#bottom_right {
width:410px;
float:left;
}
#bottom_left p, {
font-weight: 600;
font-size:13px;
margin:8px;
text-align:justify;
}
#bottom_right p {
font-size:13px;
margin:8px;
text-align:justify;
}

</style>

Thanks!

CreativeMind · #13 02-19-2007, 09:44 PM

Can anyone help me out with this if coothead is not available? You don't have to make an Arrow Gif or PNG image for me. You can just let me know where the URL link or URL code is place in CSS. I already have and arrow for this page setup. The problem that I am having is that when I add the URL link to the arrow, it indent the text and leaving the bottom portion of the text to the left. I would like for it to have all text indent when I add the arrow next to the text or paragraph.

I have an image of the example that I am talking about above this thread.

Thanks!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)