Html/CSS help :)

[Flanelman]

I'm having a few problems at the moment which i will list below, thanks in advance

1)

on my site i have made the site and put a border on it, yet there is like.. a second border on the border.. so my black border doesn't touch the edge of the screen instead there is a white gap between my border and the edge of the screen, i was wondering if people know how to remove this it's as if my page doesnt want to use the full 1920x1080.


2/3)

i want to have 3 links going along like this: "link1 - link 2 - link3", but i cant figure out how to do this, i can get them going downwards so one on top of each other, but not along.. also when i write them i cant specify the space between each word? so like i put the layout like "one     -     two     -     three" but it comes out like "one - two - three"

thanks again

edit: i fixed how to get the links going across, but i still need help with the other two issues  also, in my css i made the links white before i made them actually link to anything and that was fine, but now they're actual links they blue? how can i change these back to white?

[Paralectic]

Pictures/Source please?

[sarfraz]

If you want your border of your website to be extended throughout the whole screen and touch the edge of the screen then write the following code in your css file 

 

body{

    margin: 0;

    padding: 0;

}

 

and if you want to show links like Link1-Link2-Link3 , then use the nav ul function and the code will be like this 

 

Nav{

   margin: 0;

   padding: 0;

}

 

Nav ul {

    margin: 0;

    padding: 0;

}

 

Nav ul li{

    width: 50px;

    height: 20px;

    border: 1px solid black;

    float: left;

    display: block;

}

 

and the html file should be like this 

 

<nav>

     <ul>

          <li><a href="#">Link 1</li>

          <li><a href="#">Link 2</li> 

          <li><a href="#">Link 3</li>

     </ul>

</nav>

[Flanelman]

Pictures/Source please?

umm.. sure here's a picture.... (don't judge me)

also, how do i 1) upload a pciture saved on my computer and 2) move the picture around the page? so move it central by say 50px? i have no idea how

[Flanelman]

it's a bit disheartening that no one has replied since seeing the web page. 

[sarfraz]

if you want to move the image to center 50 px from left then write the following code :

<img src="(image url)" style="margin-left: 50px;">

 

that's it

[Flanelman]

if you want to move the image to center 50 px from left then write the following code :

<img src="(image url)" style="margin-left: 50px;">

 

that's it

anyway to do this in the css file? maybe put the picture in a div? 

[sarfraz]

anyway to do this in the css file? maybe put the picture in a div? 

if you want to put the image in div , you can do it or you can just define properties of img in css file itself

[HarryNyquist]

anyway to do this in the css file? maybe put the picture in a div? 

 

If you give the image a class or an id attribute, you can specify styles for that class/id in the css file itself without specifying it for any other <img> tags you may have on the page.

e.g.

<img src="some_source.jpg" id="coolThing" />

And the CSS:

#coolThing {    margin-left: 50px;}

Class would be similar, but it would be class="coolThing" and .coolThing in the css.

[ekv]

If you want to move picture to center you have to options:

1st: margin: 0px auto; dispay: block;

2: <center><img src=""></center>

 

If you want to move it for 50px you can use:

margin: 0px 0px 0px 50px; in class/id or add by attr in style.

[Flanelman]

Thanks for all the help guys I have one more question:

i want to have my paragraph take up half the page, the right side. so in the HTML i have just put some random paragraphs in, and in the css i have put the code:
 

#content .main

{
 

float:right;

width: 500px;

background-color: black
 

}

 

i have the main in a div class and the content in a div ID, so that is all right, but when i did this saved it and ran it the paragraph just went across the whole page.

in my header i have links that i used just "float: right;" on and that worked fine.. so im not sure why this isn't working..

thanks in advance

edit: ive just realised that it isnt picking up anything i do to that area. here is my html code:

<div id = "Content">

 

    <div class = "links">

            <ul>

                   <li> link 1 </li>

                   <li> link 2 </li>

                   <li> link 3 </li>

            </ul>

     </div>

     <div class = "Main">

            <p> **random paragraph** </p>

     </div>
</div>

 

and above is my CSS.. anyone know why my CSS isnt applying? it is linked in correct because the css for other parts is working fine.

 

[ekv]

This code is let's say OK, is going to work but le me help you in future how to debug ur CSS

Try to use Google Chrome. Chrome have best developer tool, open your page, press F12 and look for errors.

I think you have problem with linking, i think you miss linked CSS file.

 

HTML/CSS isn't case sensitive but try not to use capital letter when you name class.

Always check name of your CSS file. (Or look for errors in console)

Dont use space between class="main" it's useless, you just waste space key.

 

Everything else is fine, this will put black background on paragraph of 500px width and put it on right side with some padding (because paragraph have padding by default)

And yeha 500px isn't "half page" 50% is.

[Flanelman]

 

This code is let's say OK, is going to work but le me help you in future how to debug ur CSS

Try to use Google Chrome. Chrome have best developer tool, open your page, press F12 and look for errors.

I think you have problem with linking, i think you miss linked CSS file.

 

HTML/CSS isn't case sensitive but try not to use capital letter when you name class.

Always check name of your CSS file. (Or look for errors in console)

Dont use space between class="main" it's useless, you just waste space key.

 

Everything else is fine, this will put black background on paragraph of 500px width and put it on right side with some padding (because paragraph have padding by default)

And yeha 500px isn't "half page" 50% is.

 

but some other stuff in my css is picked up? so it must be linked correctly? also, how do i put a picture i have to the bottom of the page, so it's touching the footer? something like "bottom: 0;" ? because atm it's  floating in the middle of the page

i appreciate your help

[r3bify]

No one answered your question about your links, so try this:

a, a:link, a:active, a:visited {	color: white;}

[vorticalbox]

If you want to move picture to center you have to options:

1st: margin: 0px auto; dispay: block;

2: <center><img src=""></center>

 

If you want to move it for 50px you can use:

margin: 0px 0px 0px 50px; in class/id or add by attr in style.

actually suggesting to use <center> in 2015