CSS Positioning

D

dembo1305

New Member
I'm sure something like this has been answered numerous times, and i've read the sticky on CSS positioning and tried some of that stuff and didn't really get far.

My problem is this, I have a page that in the body I have a picture slideshow and a bunch of text. I want the text to wrap around the picture. What would be the best method for doing this? Kinda like text-wrap in Word..

Any things I should try?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You will want to use css floats not positioning. Floating an element will allow text to wrap around (if there is enough text). For example:
HTML: 
<body>
   <p>
      <span class="block">Image</span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis urna consectetur tellus congue convallis eget ac leo. Morbi non mi hendrerit purus imperdiet auctor eu a metus. Donec lacinia convallis ipsum ut hendrerit. Curabitur eget blandit orci. Aenean sit amet purus nibh. Suspendisse potenti. 
   <p>
</body>
Code: 
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size:0.75em;
}
p {
   width: 200px;
   margin:100px auto;
   font-size:1em;
   color:#333;
}
span.block {
  display:block;
  width:75px;
  height:50px;
  line-height:50px;
  font-size:2em;
  text-align:center;
  background-color:#f1f1f1;
  border:solid 1px #ddd;
}
 
D

dembo1305

New Member
PixelPusher said:
You will want to use css floats not positioning. Floating an element will allow text to wrap around (if there is enough text). For example:
HTML: 
<body>
   <p>
      <span class="block">Image</span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis urna consectetur tellus congue convallis eget ac leo. Morbi non mi hendrerit purus imperdiet auctor eu a metus. Donec lacinia convallis ipsum ut hendrerit. Curabitur eget blandit orci. Aenean sit amet purus nibh. Suspendisse potenti. 
   <p>
</body>
Code: 
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size:0.75em;
}
p {
   width: 200px;
   margin:100px auto;
   font-size:1em;
   color:#333;
}
span.block {
  display:block;
  width:75px;
  height:50px;
  line-height:50px;
  font-size:2em;
  text-align:center;
  background-color:#f1f1f1;
  border:solid 1px #ddd;
}
Click to expand...

I am using floats, and they're working everywhere but on this one page.. But i'll keep looking at it and see if I can't get it working.
 
D

dembo1305

New Member
Tim said:
Just some simple margin should do it i geus
Click to expand...

Nah what's happening is I have a image floated left and then i have 3 lines of text floated right. two of them are floated right but the top one is above the picture.

I tried moving the picture code from above the text code to the bottom and that got all the text to be floated right but then the text didn't start untill the bottom of the picture
 
D

dembo1305

New Member
Phreaddee said:
img {
float:left;
}
Click to expand...

i had it set up like this
Code: 
[html]
<p class="image">
img scr....
<p>
<p class="text">
three 
lines
of text..
<p>
[end html]

Code: 
[css]

p.image{
float:left;
}

p.text{
float:right;
}

[end css]

also i couldn't think of anything to use other than the <p>
can i define <div class="image">? or can it only be <div id="image">
I was trying not to use so many div's
any suggestions?
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
css
img {float:left;}

html

<img src="..."><p>blah</p>

dont try and overcomplicate it.
 
D

dembo1305

New Member
Phreaddee said:
css
img {float:left;}

html

<img src="..."><p>blah</p>

dont try and overcomplicate it.
Click to expand...

So I can do css styling for the actual tag "img"?? I just thought that you could do that to stuff that you defined.

Also though I have more than one image on more than one page. And some are different. On one page I need the image to be centered. What would be the best way to tell the first image to be floated left and then the others be centered? Also what would be the best way to go about centering an image?
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
dembo1305 said:
Nah what's happening is I have a image floated left and then i have 3 lines of text floated right. two of them are floated right but the top one is above the picture.

I tried moving the picture code from above the text code to the bottom and that got all the text to be floated right but then the text didn't start untill the bottom of the picture
Click to expand...

What is written first in the markup? Do you have a link to the page in question, or could you post a snippet?


And yes a element can be targeted regardless of if you have defined a class or id. I suggest you look into css psuedo classes, grouping, and selectors.

Here are a few examples:

Target the first child list in any list item
Code: 
ul li > ul {
   PROPERTIES
}

Target any span in a heading 1, heading 2 or heading 3 tag
Code: 
h1 span, h2 span, h3 span {
   PROPERTIES
}

Target any paragraph that has a class
Code: 
p[class] {
   PROPERTIES
}

Target the first strong tag in any paragraph that has a id
Code: 
p[id] strong:first-child {
   PROPERTIES
}

Target all images within the last paragraph in any div that has an id
Code: 
div[id] p:last-child img {
   PROPERTIES
}
 
Last edited:
D

dembo1305

New Member
PixelPusher said:
What is written first in the markup? Do you have a link to the page in question, or could you post a snippet?


And yes a element can be targeted regardless of if you have defined a class or id. I suggest you look into css psuedo classes, grouping, and selectors.

Here are a few examples:

Target the first child list in any list item
Code: 
ul li > ul {
   PROPERTIES
}

Target any span in a heading 1, heading 2 or heading 3 tag
Code: 
h1 span, h2 span, h3 span {
   PROPERTIES
}

Target any paragraph that has a class
Code: 
p[class] {
   PROPERTIES
}

Target the first strong tag in any paragraph that has a id
Code: 
p[id] strong:first-child {
   PROPERTIES
}

Target all images within the last paragraph in any div that has an id
Code: 
div[id] p:last-child img {
   PROPERTIES
}
Click to expand...

the site in question is forestcitytravelball.com, and if you go to the directions page, that's what i was wanting, however if I go to locations page, it just has a line of text with three links.
I had a picture but when i added the picture it would take away the links, in addition to moving the first line above the picture.
dunno how much you can help if it's not visible, but thanks regardless.

I'm actually working on a redesign right now. As I learn more and remember more about all this I'm able to do a bit more. Last time i tried any of this was almost 2 years ago and it was never published.. so it will come with time I guess..

Also I knew you could say p.image kinda like i did on my site, but can you say p[image]? or are your brackets referring to a dot?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
dembo1305 said:
...

Also I knew you could say p.image kinda like i did on my site, but can you say p[image]? or are your brackets referring to a dot?
Click to expand...

I will take a look at your site/page and see if can help.

If you declare "p.image" that would mean you are targeting a paragraph with a class name of "image". For reference:

  1. p.image = <p class="image">
  2. p#image = <p id="image">
  3. p img = <p>...<img src="" alt="" />...</p>
  4. p[attribute] = Targets any paragraph with the defined attribute in the hard brackets. (In my example before it was "id")

With hard brackets "[]" you can use any valid attribute for that element; you can also set a value for the attribute. For example:

a[rel="external"] = Targets any anchor that has a rel attribute that equals "external" (<a href="" rel="external">Text</a>)
 
You must log in or register to reply here.
Top