Jump to content

html and css website

knows_something

Hello,
i'm trying to make a website and i'm veeeery bad at it. I searched online for this type of design but i couldn't find anything nor did i know what to search. I want my home logo in the top left corner, fixed and with a link- i managed to do that, but i cant position three pictures in the middle of the screen in a round shape. I would like to know how to do that or at least what type of function that is so i can research it. At the bottom i'd like to see my copyright info and i need everything to be fixed, so no matter how much you zoom or change the size of the window, everything needs to be in place. Because i am as talented as Picasso I've taken the liberty to draw that in mspaint :D. Thank you for your assistance.

post-132941-0-19551100-1447881651_thumb.

Link to comment
Share on other sites

Link to post
Share on other sites

snip

 

You want an image in the top left corner, and 3 more images aligned in the center?

What do you mean "round shape"?

 

Normally I use "float", "margin autos" and "overflow:hidden"

 

You really need a better diagram, or perhaps create a mockup in powerpoint or something.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

That's called responsive web-design. Check out bootstrap

Link to comment
Share on other sites

Link to post
Share on other sites

You pretty much can use CSS round corners to turn them into circles. As for making them centered, you need to split the content area by three and have the circles centered in them.

 

I'd code it, but my main PC is stuck at the moment installing the new Windows 10 update....

Link to comment
Share on other sites

Link to post
Share on other sites

You pretty much can use CSS round corners to turn them into circles. As for making them centered, you need to split the content area by three and have the circles centered in them.

 

I'd code it, but my main PC is stuck at the moment installing the new Windows 10 update....

 

The OP can just create a < div >, place 3 < img > inside, assign them styles that define how they float, set horizontal margins to auto, overflow to hidden.  The style for the div should have margin auto, the images need to be floating.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

You pretty much can use CSS round corners to turn them into circles. As for making them centered, you need to split the content area by three and have the circles centered in them.

 

I'd code it, but my main PC is stuck at the moment installing the new Windows 10 update....

i don't know how to "split them in area by three" and don't know how to center a circle in them. And if i do that will it work on smaller resolutions (mine is fullHD) and other browser (i.e. edge, ie, firefox...)?

Link to comment
Share on other sites

Link to post
Share on other sites

The OP can just create a < div >, place 3 < img > inside, assign them styles that define how they float, set horizontal margins to auto, overflow to hidden.  The style for the div should have margin auto, the images need to be floating.

I still don't know hot to pot them in the center of the website. I can use <center> to put them in the middle horizontally, but i don't know how to do that vertically, except by using margin, which would be inconsistent on other browsers and resolutions. Can i write "margin-top:50%;"?

Link to comment
Share on other sites

Link to post
Share on other sites

i don't know how to "split them in area by three" and don't know how to center a circle in them. And if i do that will it work on smaller resolutions (mine is fullHD) and other browser (i.e. edge, ie, firefox...)?

 

Well, if you use percentages to define the areas, it will resize according to the resolution / size of the window.

 

How I would do it is make three divs inside of your main div, make them 33.33% width. Inside each of the divs, put one image. Set the image's margin left and right to auto and use CSS3 rounded corners to make them round.

Link to comment
Share on other sites

Link to post
Share on other sites

I still don't know hot to pot them in the center of the website. I can use <center> to put them in the middle horizontally, but i don't know how to do that vertically, except by using margin, which would be inconsistent on other browsers and resolutions. Can i write "margin-top:50%;"?

 

Draw up some mockup diagrams in powerpoint or photoshop or any other software.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

Well, if you use percentages to define the areas, it will resize according to the resolution / size of the window.

 

How I would do it is make three divs inside of your main div, make them 33.33% width. Inside each of the divs, put one image. Set the image's margin left and right to auto and use CSS3 rounded corners to make them round.

i dont' know if i did something wrong but this:

.div3{

width:33%;

margin-left:auto;

margin-right:auto;

combined with:

<div>

<div class="div3"> <img src="otroski.jpg"></div>

<div class="div3"> <img src="odrasli.jpg"></div>

<div class="div3"><img src="sportni.jpg"></div>

</div>

stacks them vertically, but it puts them in the middle.

 

Edit: just noticed it's not really in the middle, they start at the 33% mark.

Link to comment
Share on other sites

Link to post
Share on other sites

i dont' know if i did something wrong but this:

.div3{

width:33%;

margin-left:auto;

margin-right:auto;

combined with:

<div>

<div class="div3"> <img src="otroski.jpg"></div>

<div class="div3"> <img src="odrasli.jpg"></div>

<div class="div3"><img src="sportni.jpg"></div>

</div>

stacks them vertically, but it puts them in the middle.

 

Edit: just noticed it's not really in the middle, they start at the 33% mark.

 

You're almost there, but it still needs work, and my working laptop is back at the office with all my files.  My home machine is for purely gaming and video editing, so I don't have my web design tools installed.

 

If you're dealing with images, don't use percentage.  Measure the total width you need (width of each image + any padding/margins you want to add).  Create a div with that width defined, use margin: auto to center it horizontally.

 

There is a trick for centering it vertically, it will require using a script to read the screen resolution (mainly height) of the display being used by any user.  Passing the value to the style and using two styles definitions -->  display: table and display:cell

 

Or if you don't want to use a script, define a min-height and max-height.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

-snip-

 

Yeah, you need to float the divs (float: left)

 

If you can, make a mockup of the site using paint or something with how you want the website to look (use fake images or something). It helps a lot more than your Picasso diagram there.

Link to comment
Share on other sites

Link to post
Share on other sites

You really should use this website, it's one of my favorite for figuring out what I am doing wrong with any particular HTML tag or CSS definition.

http://www.w3schools.com/

 

Here are some great tools for rapid prototyping of websites

https://balsamiq.com/

http://www.axure.com/

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

border-radius:50% seems to do the tricks and everything seems fine. I put them inline and in the middle by using <center> before the main div and display:inline. Margin-top:50%; in the div css class doesn't do the trick. What do i use to put them vertically in the middle? 

Link to comment
Share on other sites

Link to post
Share on other sites

border-radius:50% seems to do the tricks and everything seems fine. I put them inline and in the middle by using <center> before the main div and display:inline. Margin-top:50%; in the div css class doesn't do the trick. What do i use to put them vertically in the middle? 

 

Because in order to use margin top 50%, the browser has to know the height of the HTML container, and if there is no height defined, it's like telling the browser the height is infinite.  What is 50% of infinity?

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

So what should my height be defined as?

this picture is what the site looks and i tried to picture how it should've looked. Pictures are down in the middle, and the center of the 2nd picture is at 50% of the site.

 

post-132941-0-02673000-1447885067_thumb.

Link to comment
Share on other sites

Link to post
Share on other sites

Read a previous comment of mine, I gave you a tip on how to define height if you want your browser to work with any display resolution.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites

Link to post
Share on other sites

Well i'm not good with tips so I don't really know what to do  :unsure:. Can you please explain?

I've read a comment on w3schools saying, that someone used this: "box-shadow: 0 0 1px #FF0000;" and i've tried it and it makes the border sharper. what does it do exactly?

Link to comment
Share on other sites

Link to post
Share on other sites

That's called responsive web-design. Check out bootstrap

 

Nothing he has asked for is responsive. In fact he's basically asked for the opposite.

 

@knows_something Are you sure this is what you want to make? Using fixed content like this rarely works well unless you use real responsive design to enable your website to adapt to fit any screen and any resolution.

 

If this is what you want to do the easiest way is to use the CSS position property. Set it to fixed and then you can use top, bottom, left and right CSS properties to position an element exactly where you want and it wont move. Just make sure you use percentages to ensure it works across different resolutions.

Link to comment
Share on other sites

Link to post
Share on other sites

Nothing he has asked for is responsive. In fact he's basically asked for the opposite.

 

@knows_something Are you sure this is what you want to make? Using fixed content like this rarely works well unless you use real responsive design to enable your website to adapt to fit any screen and any resolution.

 

If this is what you want to do the easiest way is to use the CSS position property. Set it to fixed and then you can use top, bottom, left and right CSS properties to position an element exactly where you want and it wont move. Just make sure you use percentages to ensure it works across different resolutions.

I want it to fit any monitor, yes, but i don't know how to move it down to the middle of the screen.  I am using percentages for moving it to the middle of the screen, but the top doesn't work. So i should put position: absolute, and then what for the top? Margin-top: x% doesn't work, as someone said above,  I need another parameter, but what? 

And if i were to put text above each picture (or bellow), how would i do that?

Link to comment
Share on other sites

Link to post
Share on other sites

I want it to fit any monitor, yes, but i don't know how to move it down to the middle of the screen.  I am using percentages for moving it to the middle of the screen, but the top doesn't work. So i should put position: absolute, and then what for the top? Margin-top: x% doesn't work, as someone said above,  I need another parameter, but what? 

And if i were to put text above each picture (or bellow), how would i do that?

 

Read my post again. I have made a few parts bold to give you a hint

Link to comment
Share on other sites

Link to post
Share on other sites

I'd like to thank everyone for their help as i've managed to do everything i wanted. Thank you... but there's another thing. How do i put text ABOVE the images. If i have one circle and try to put words over it, they would appear on the side. Do i have to create another div for that or what?

Link to comment
Share on other sites

Link to post
Share on other sites

I'd like to thank everyone for their help as i've managed to do everything i wanted. Thank you... but there's another thing. How do i put text ABOVE the images. If i have one circle and try to put words over it, they would appear on the side. Do i have to create another div for that or what?

 

You can either have the image be a background image for the said div and just have text over it the normal way. The other harder way I know of is to float and fix text over the image. I'm happy you got it working though. I'm designing a website for a website myself at the moment.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×