Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Major problems with layout - please help!

Featured Replies

Hi people.

 

I am making a web site.

 

http://www.freshfly.co.uk

 

I need the boxes where there is images/text duplicated so there is loads on the page. How do i do this? At the moment you can see there is about 16, but i want like 60 or something.

 

How do i do this? Could anyone take the html source and edit it for me please ? When i try edit it, copy/paste boxes it just goes messy and all over the place. maybe a problem with the css file? if anyone could help me out please do try!

 

Thanks alot. :p

index.html

If it is just that you want boxes around each image, best just add borders to the images. You can control their width and colour in the css.

 

Eg img {

border: solid 1px #333;

}

 

would get you a solid line border 1px wide in grey. If you have images in the page that you don't want borders round, just gived the bordered image a class in the html eg. <img class="border">

 

and the adjust the css to;

 

.border {

border: solid 1px #333;

}

 

If you need more help give us a yell. I haven't got time change your html / css at the mo....

  • Author
If it is just that you want boxes around each image, best just add borders to the images. You can control their width and colour in the css.

 

Eg img {

border: solid 1px #333;

}

 

would get you a solid line border 1px wide in grey. If you have images in the page that you don't want borders round, just gived the bordered image a class in the html eg. <img class="border">

 

and the adjust the css to;

 

.border {

border: solid 1px #333;

}

 

If you need more help give us a yell. I haven't got time change your html / css at the mo....

 

 

 

Thanks for your help, but im a proper noob with this, do you edit the html or css file?

 

If you could, please could you take alook at the html file as its all over the place with loads of boxes/borders everywherre and im lost.

 

thansk alot pal

  • Author
Ok I'm having a good look now....

 

 

Your a legend, thanks. :lol:

Ok I've had a rummage through the html and tidied that part up.

 

I will now have a look at the css file and see what's doing...

 

I presume you created this using dreamweaver?

 

I suggest taking time out to learn a bit about the code you are using... will give you some good links in a bit.

 

New html attached - still some validation errors but better and more readable :)

 

 

 

OK.

 

In your css you have this:

 

.store_item_pnamecentered {
position: relative;
border: solid #c2c2c2 1px;
padding: 5px;
width: 142px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
text-align: center;
}

 

The border bit is the part that adds the border. So you just need t make sure each time you add an image into the html, that the containing block (div or p) has in the opening tag; class="store_item_pnamecentered" eg <div class="store_item_pnamecentered"> Your content </div>

 

I highly recommend you learning at least the basics so you understand what the code is doing even if you don't write it your self. Have a look at HTML Dog and W3Schools

 

I don't have enough time on my hands to recode and sort it completely for u I'm afraid but try changing your html for what i have attached and adding the above class to any new images. Let me know how you get on.

 

Validation problems may cause display problems too so it is worth learning more about that too.

  • Author
Ok I've had a rummage through the html and tidied that part up.

 

I will now have a look at the css file and see what's doing...

 

I presume you created this using dreamweaver?

 

I suggest taking time out to learn a bit about the code you are using... will give you some good links in a bit.

 

New html attached - still some validation errors but better and more readable :)

 

 

 

OK.

 

In your css you have this:

 

.store_item_pnamecentered {
position: relative;
[b]border: solid #c2c2c2 1px;[/b]
padding: 5px;
width: 142px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
text-align: center;
}

 

The bold bit is the part that adds the border. So you just need t make sure each time you add an image into the html, that the containing block (div or p) has in the opening tag; class="store_item_pnamecentered" eg <div class="store_item_pnamecentered"> Your content </div>

 

I highly recommend you learning at least the basics so you understand what the code is doing even if you don't write it your self. Have a look at HTML Dog and W3Schools

 

I don't have enough time on my hands to recode and sort it completely for u I'm afraid but try changing your html for what i have attached and adding the above class to any new images. Let me know how you get on.

 

Validation problems may cause display problems too so it is worth learning more about that too.

 

 

Yes made with dreamweaver, thanks alot pal.

 

Im not too fussed how messy the html is, or valiation, i really just want aload more boxes that run smoothly with the others.

 

please keep me updated.

 

i really appreciate this. :D

You need to be fussed by the validation I'm afraid else chances are your page won't display properly.

 

You need to swap your html for the one i have attached and apply the class to each new image as suggested.

  • Author
You need to be fussed by the validation I'm afraid else chances are your page won't display properly.

 

You need to swap your html for the one i have attached and apply the class to each new image as suggested.

 

 

Sorry i replied before seeing your updated post.

 

I'll have a go at that now, thanks alot

might just be me but the pic of gary glitter on the front of yer site as it opens made me closed the page straight away

 

no 1 will want to see his ugly mug for obvious reasons maybey move that pic to somewere else on your site buddy

 

just my personal opinion mind....

 

you are giving a pedo marketing

  • Author
might just be me but the pic of gary glitter on the front of yer site as it opens made me closed the page straight away

 

no 1 will want to see his ugly mug for obvious reasons maybey move that pic to somewere else on your site buddy

 

just my personal opinion mind....

 

you are giving a pedo marketing

 

 

Sorry pal that will be moved in due time.

 

This is literally a testing base. Please forgive me and forget about glitter, i hate the cretin aswell

  • Author

Im lost :huh::o

 

Really dont know what to do.

 

i just want more sqaure boxes in line with the others.

 

im trying to do as you suggested but its not working correctly.

 

could someone please add some boxes?

 

sorry for sounding like a tool.

lol totally m8 i wasnt saying anything about yer site its cool m8

Ok.

 

I presume u want these boxes to go around some images you want to add in?

 

So, your image could be say: kylie.png

 

Add this to your html (inside the store counter div);

 

<div class="store_item_pnamecentered">

 

<a href="http://www.freshfly.co.uk/kylie.php"> <img class="itempic" src="http://www.freshfly.co.uk/kylie.png" alt="Richie" /></a>

 

<p class="product_name_centered"><b>kylie</b></p>

 

<p class="product_price_centered">£6.99</p>

 

</div> <!-- End store_item_pnamecentered -->

 

Then the css you already have should automatically do the rest ie. make the boxes.

 

If it doesn't work, let me know...

  • Author
Ok.

 

I presume u want these boxes to go around some images you want to add in?

 

So, your image could be say: kylie.png

 

Add this to your html (inside the store counter div);

 

<div class="store_item_pnamecentered">

 

<a href="http://www.freshfly.co.uk/kylie.php"> <img class="itempic" src="http://www.freshfly.co.uk/kylie.png" alt="Richie" /></a>

 

<p class="product_name_centered"><b>kylie</b></p>

 

<p class="product_price_centered">£6.99</p>

 

</div> <!-- End store_item_pnamecentered -->

 

Then the css you already have should automatically do the rest ie. make the boxes.

 

If it doesn't work, let me know...

 

 

cheers, after messing about think iv done what i wanted!!

 

http://www.freshfly.co.uk/

Did what i suggested work? Sorry if initial advice was confusing; its always hard to know what someone already know.

 

All the best :)

  • Author
Did what i suggested work? Sorry if initial advice was confusing; its always hard to know what someone already know.

 

All the best :)

 

 

Yes it worked. You are a top man. Have a beer on me tonight B)

 

Next thing i have to ask you guys, on my contact page it works, but on most browsers it will pop up their email client. problem is i know alot of peeps dont use an email client software so its a waste of time. is there anyway to make the page send the emails internally kind of thing, without the need of going through their email account?

 

cheers

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.