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.

css layout

Featured Replies

hi all fixed some of the problems i posted previously, got a new batch now :(

 

the link is http://davidcolligan.co.uk/bikechain/index3.html

 

the problems i have now are:-

 

1)im wanting to center my navigation without having to use margin-left,

2)my right bar(aka carbonBar) wont repeat, i need it to just automaticaly just go from top to bottom.

3)one the bikes in the accessories div is moved up and out of place,

4) i also have a div caclled "bottomContent" i have placed and border-top onto it, but as you can see that it gets displayed just above the second lot of bikes, when it should be displayed at the bottom of them so it will seperate them.

 

any help would be much appreciated

 

thanks

 

collie

1.add

nav{float:right;}

and then use margin-right instead?

2.use the code

background-repeat:repeat-y;

for vertical repeat, i think the reason it isn't repeating is because it's the background for the div, and the divs height is 16 pixels, make it's height 100%

3.

.accsesories1{float:down)

???

4. the reason it only shows at the top is because you've used

border-top:solid #a6a6a6 2px;

put the three bikes in a div and use the code

#3bikes
{
display:inline; /*should help with the 1 bike moving up */
border-bottom:solid #a6a6a6 2px;
}

  • Author

thanx for the reply nick but none of that worked :(, i have reuploaded the page, with the bottomContent, i have added a background-colour:red; to it so you can see that problem alot more, i need the bottomContent to be after the last three sets of bikes in the accessories div

thanx for the reply nick but none of that worked :(, i have reuploaded the page, with the bottomContent, i have added a background-colour:red; to it so you can see that problem alot more, i need the bottomContent to be after the last three sets of bikes in the accessories div

 

NONE of it worked? wow... i suck. lmao

let's do this one at a time, starting with that wierd floating up bike.

I made a copy of the css and html source on my desktop, and im trying to fix it... I have the accesories 1 in the right spot, but the other 2 are too far down now... I don't know what to do now :/

 

It looks like the 2 bikes are in the bottome content, but looking at the code, their obviously not.

Edited by NickTheGreat

Not sure what your trying to do, I can see the floats aren't being cleared

 

add overflow:hidden to .deals & .accessories, remove width from #accessPic

  • Author

i done the overflow thing, but now the bottom content is cutting off the bottom of the bikes, if i add a margin-top its still the same, and i also cnt get the carbonBar image to repeat :(

i done the overflow thing, but now the bottom content is cutting off the bottom of the bikes, if i add a margin-top its still the same, and i also cnt get the carbonBar image to repeat :(

 

you have the code:

{
background-image:repeat-y;
height:100%;
}

 

???

  • Author

you have the code:

{
background-image:repeat-y;
height:100%;
}

 

???

 

 

i tried that didnt work for me, it works if i put a height on it, but im wanting to work so that i dnt have to add a height and that it will just naturally get bigger and smaller depending on the size of the content on the page

i tried that didnt work for me, it works if i put a height on it, but im wanting to work so that i dnt have to add a height and that it will just naturally get bigger and smaller depending on the size of the content on the page

 

if the height (of the div) is 100% it will go as tall as can be within the div, so it will scale to the page size.

I though that maybe there was a fixed height, and the background image couldn't repeat. my bad.

Hey collie,

 

I took some time to fix your errors for you.

 

You can find a fullpage preview here: http://jsfiddle.net/michalkopanski/mMkat/25/embedded/result/'>http://jsfiddle.net/michalkopanski/mMkat/25/embedded/result/

 

And the code shown here: http://jsfiddle.net/michalkopanski/mMkat/25/

 

Please pay close attention to the clearfixes I've added to your HTML (top left box).

 

I also made some comments in the CSS, so check those out as well.

 

Hope this does the trick.

  • Author

Hey collie,

 

I took some time to fix your errors for you.

 

You can find a fullpage preview here: http://jsfiddle.net/michalkopanski/mMkat/25/embedded/result/'>http://jsfiddle.net/michalkopanski/mMkat/25/embedded/result/

 

And the code shown here: http://jsfiddle.net/michalkopanski/mMkat/25/

 

Please pay close attention to the clearfixes I've added to your HTML (top left box).

 

I also made some comments in the CSS, so check those out as well.

 

Hope this does the trick.

 

 

that worked a treat thanx alot mate :)

 

collie

that worked a treat thanx alot mate :)

 

collie

 

Glad I can help.

 

Best of luck!

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.