Stuck again Need your help

June 3, 201115 yr

Hi, i need some help aligning the text next to the image as shown here .

When i adjust the styles in my css file it doesn't change anything.

here is my code for the area on the image:

<div id="content_middle">
<img src="images/week_bg.jpg" width="497" height="331" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<p>sjdbvsdbvusdbvusbdvusdbvusdbv,sdvnnsdv,ccnskj jsbdv vbsdvsbvv jbdv dv j dv svnbs sjdbvjsbdv sdvjbsdv sdjvb sdvsdv  sdvb dvkjsbdv advkajbv ,</p>
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
<img src="images/468_60.jpg" width="468" height="60" class="middle_big" />
<img src="images/125_125.jpg" width="125" height="125" class="middle_small" />
</div>

And the css:

body {
background-image:url(images/main_bg.jpg);
background-repeat: repeat-x;
background-color: #abaacb;
font-family: Arial, Helvetica, sans-serif;	
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

p, h1, h2, h3, h4, h5 , h6, ul, p li img{
margin: 0px;
padding: 0px; 
}

#content {
margin-top: 0px;
margin: 0 auto;
width: 1010px;
height: 2600px;
background-color: #bfbfd7;
}

#header {
padding: 5px 0px 0px 5px;
display: block;
}

#navigation ul {
width: 1000px;
height: 52px;
margin-left: 4px;
margin-top: 5px;
list-style-type: none;
background:url(images/nav_bg.jpg);
background-repeat: no-repeat;
}

#navigation li {
	float: left;
       padding-top: 18px;
       padding-right: 19px;
       padding-bottom: 18px;
       padding-left: 19px;
       text-transform: uppercase;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 14px;
}

#navigation li a {
text-decoration: none;
color:#FFF;
}

#ads_top{
width: 1000px;
margin: 0 auto;
padding-left: 11px;
}

.top_ads {
padding-top: 5px;
padding-right: 20px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
padding-bottom: 5px;
}

.top_adslast {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}

#content_left {
float: left;
width: 240px;
height: auto;
padding: 0px 2px 5px 8px;
}

.name_tag {
padding-top: 5px;
}

#content_middle {
float: left;
width: 500px;
height: auto;
padding: 0px 5px 5px 5px;
}
.middle_big {
padding-top: 6px;
padding-left: 14px;
float: left;
}


.middle_small {
padding-top: 6px;
padding-left: 14px;
float: left;
}

#content_right {
float: left;
width: 240px;
height: auto;
padding: 0px 5px 5px 5px;
}

table {
padding-top: 5px;
}

td {
padding-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding-left: 2px;
padding-right: 2px;
}

td a {
color: #000;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000;
text-decoration: none;
}

tr:hover {
background-color: #d79610
}

table tr td {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#footer {
width: 1010px;
height: 112px;
clear: both;
background-image: url(images/footer_bg.jpg);
background-repeat: repeat-x;
}

Edited June 3, 201115 yr by RobbieD90

June 3, 201115 yr

Wheres your tags for the text i just see images?, Ur not putting the text in the images are you?

June 3, 201115 yr

Author

sorry i copied the wrong bit here is the code how i have it now.

that image is of how my ps mock-up looked and is what i am trying too mimick.

June 3, 201115 yr

Not seeing any code, can you not put the website up live it would be a lot easier to help you if we could see it for ourselves

June 3, 201115 yr

Can you show us an image of how it looks now, and how it should look? D:

June 3, 201115 yr

Author

this is what it looks like live:The Site

and this is what i would like it to look like:

when i add the styles though nothing changes. i have closed all the tags but nothing applies.

thanks for your help.

June 3, 201115 yr

If the text is about the adds then i would place the image inside the p tag like so

<p class="ad_text"">
<img class="middle_small" height="125" width="125" src="images/125_125.jpg">
This is some text which will sit next to your image
</p>

Then just add some css like so

.ad_text img{
padding-right: 5px;

}

Let me know how that works for you

Edited June 3, 201115 yr by benhawk

RobbieD90
1

June 3, 201115 yr

Author

If the text is about the adds then i would place the image inside the p tag like so

<img class="middle_small" height="125" width="125" src="images/125_125.jpg">
This is some text which will sit next to your image

Then just add some css like so
.ad_text img{
padding-right: 5px;

}
Let me know how that works for you

thats worked thanks but if you take a look now at the site its to far over on the right and to close to the image above. Is there a way i can change that. Also, how can i change the font size and line height as it doesn't seem to change when i add it to the css.

thanks for your your help.

Edited June 3, 201115 yr by RobbieD90

June 3, 201115 yr

thats worked thanks but if you take a look now at the site its to far over on the right and to close to the image above. Is there a way i can change that. Also, how can i change the font size and line height as it doesn't seem to change when i add it to the css.

thanks for your your help.

Shouldn't the css be

.add_text p{
padding-right: 5px;

}

Then add your line height, positioning and font to the above css

then the html would be something like

<img src="images/125_125.jpg" width="125" height="125" class="middle_small" /> your text

Edited June 3, 201115 yr by pat24

RobbieD90
1

June 3, 201115 yr

Author

Shouldn't the css be
.add_text p{
padding-right: 5px;

}
Then add your line height, positioning and font to the above css

then the html would be something like

<img src="images/125_125.jpg" width="125" height="125" class="middle_small" /> your text

It seems that between you both you have fixed my problem cheers. +1 to you both and its only the second time i have done that!

June 3, 201115 yr

Just looking through ur code, you should remove the float from here

.middle_big {
 float: left; --Remove this
 padding-left: 14px;
 padding-top: 6px;
}

You dont need this float and because u have not cleared it, its causing poblems

RobbieD90
1

June 3, 201115 yr

Author

Just looking through ur code, you should remove the float from here
.middle_big {
 float: left; --Remove this
 padding-left: 14px;
 padding-top: 6px;
}
You dont need this float and because u have not cleared it, its causing poblems

thanks that seems to of solve some of the troubles i was having.

+1 again that has solved every single problem i was having and all the styles i apply are now working. cheers

Edited June 3, 201115 yr by RobbieD90

June 3, 201115 yr

Okay to do this clean and professional try this.

<div class="small_ad_wrapper">
<img class="middle_small" height="125" width="125" src="images/125_125.jpg"/>
<p>This is some text witch will sit nicely by your addvertisement</p>
</div>

Then you css should be this


.small_ad_wrapper{
 padding: 5px;
}

.small_ad_wrapper p{

 float: left;
 font-size: 10px;
 padding-left: 10px;
 width: 280px;
}

.middle_small {
 float: left;
 padding-left: 14px;
}

Let me know how that works for yah, and dont forget to remove that float

Edited June 3, 201115 yr by benhawk

June 3, 201115 yr

Author

Okay to do this clean and professional try this.

<div class="small_ad_wrapper"">
<img class="middle_small" height="125" width="125" src="images/125_125.jpg"/>
<p>This is some text witch will sit nicely by your addvertisement</p>
</div>

Then you css should be this


.small_ad_wrapper{
 padding: 5px;
}

.small_ad_wrapper p{

 float: left;
 font-size: 10px;
 padding-left: 10px;
 width: 280px;
}

.middle_small {
 float: left;
 padding-left: 14px;
}

Let me know how that works for yah, and dont forget to remove that float

i am off out now. will let you know how it goes tomorrow. cheers.

Edited June 3, 201115 yr by RobbieD90

June 3, 201115 yr

to further achive the image you were looking for add this to the .small_ad_wrapper p

   line-height: 2em;
   text-align: center;

Stuck again Need your help

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)