div css

theighost · #1 (**permalink**) 09-11-08, 01:12 PM

i am new to css and i kind of hate it now, maybe someone will make me love it.

i have very urgent questions about a div class:

I want to do the following to a div and i need the right css:

1. I need the boder of the div to start with a white line and after the white line comes a gray one.

2.i need the div to be of a specific width and at the same time to be in the center of the page, this div will be the whole page in fact, but it will not be the width of the screen and it WILL be in the centre.

3.if i write any long text in the div, longer than the div, i need that text to continue in the div, not go continuing outside of the div.

btw this div will contain other divs that will contain form inputs.

someone please help. i am getting

UnrealEd · #2 (**permalink**) 09-12-08, 02:42 AM

1: you need to explain a little more what you're trying to do. Are you trying to make a gradient border?

2: this is the solution:

CSS Code:

.myDiv {
  position:relative;
  margin:0 auto;
  width:500px;
}

3: this will do the trick:

CSS Code:

.myDiv {
  overflow:auto;
}

theighost · #3 (**permalink**) 09-12-08, 03:08 AM

1st thanx.

second. what i am trying to do is to make a registration form, this form will not be as wide as the screen, instead it will be thiner and in the center of the page. this form will be in a big div that also contains other smaller divs.

UnrealEd · #4 (**permalink**) 09-12-08, 03:14 AM

uhu, I understood that part, but what I meant was: what do you mean with the white border and the gray border?

You see: it's impossible to assign 2 border colors on the same element (on the same side of the div), so if you want to create a gradient border, you'll have to use several divs, or use an image

theighost · #5 (**permalink**) 09-12-08, 04:00 AM

hmm i get your point, i think i need to make another div. thnx

theighost · #6 (**permalink**) 09-12-08, 04:05 AM

hey a problem, when i use the overflow:auto; if the text is too long a scroll bar appears, i would like the text to continue in the next line (like put a <br> tag)

theighost · #7 (**permalink**) 09-12-08, 04:07 AM

lol sorry the problem solved as i have white-space:nowrap; in the css file

theighost · #8 (**permalink**) 09-12-08, 06:28 AM

i have another question, i know i am getting a pain.

in a div there is a small picture i write a long text next to it, so the text goes to a new line, the text that goes into the new line starts just under the picture, i want it to start under the other text's point of start, sorry about this bad explanation but the question is a bit hard to explain

job0107 · #9 (**permalink**) 09-12-08, 07:17 AM

If you float your image then the text will wrap around it.

In this example I am floating the image left.

HTML Code:

<html>
<head>
<style>
body
{
 background:#000;
 }
.container
{
 border:4px solid #fff;
 width:508px;
 }
.myDiv
{
 border:4px solid #ccc;
 background:#fff;
 width:500px;
 height:500px;
 padding:10px;
 text-align:justify;
 overflow:auto;
 }
.myImg
{
 float:left;
 margin-right:15px;
 margin-bottom:5px;
 }
</style>
</head>
<body>
<div class="container">
 <div class="myDiv">
  <img class="myImg" sec="" width="200px" height="200px">
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
 </div>
</div>
</body>
</html>

And in this example I am floating the image right.

HTML Code:

<html>
<head>
<style>
body
{
 background:#000;
 }
.container
{
 border:4px solid #fff;
 width:508px;
 }
.myDiv
{
 border:4px solid #ccc;
 background:#fff;
 width:500px;
 height:500px;
 padding:10px;
 text-align:justify;
 overflow:auto;
 }
.myImg
{
 float:right;
 margin-left:15px;
 margin-bottom:5px;
 }
</style>
</head>
<body>
<div class="container">
 <div class="myDiv">
  <img class="myImg" sec="" width="200px" height="200px">
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
 </div>
</div>
</body>
</html>

theighost · #10 (**permalink**) 09-12-08, 10:22 AM

well actually i don't want to wrap the text around the image.
i will give u the example

::::::::text text text
::::::::text text text
::::::::text text text
(empty)text text text
(empty) text text text

i don't want it to look like this

:::::: text text text
:::::: text text text
:::::: text text text
text text text text

the points represent the image

div css

Internet Services

Website Development

Tech Hardware