Jump to content
Please Use CODE Tags

html/css help please :)

Flanelman
By Flanelman
in Programming
 Share
Go to solution Solved by Paralectic,

oh, putting 0 padding on h1 aswell as the div got them very close together, thank you, but how would i make them actually touch? 

Set a negative margin?

Posted

Below in the picture you can see my current web page, i want to make it so the grey bar that has the menu on it is actually touching the page name, so they're connected but i'm having trouble doing so.

 

Ive tried changing the <h1> tag and even the div the h1 is in padding to 0, so there is no space underneath and that didn't work. i have everything in individual div statements, so the menu is in the container, nav bar and links (3 divs) and the page title is under container and header (2 divs) if that helps. Ive tried padding them to 0 or even auto but to no avail. 

 

if someone could help me here that would be miuch appreciated :) i remember it's not that hard but it's been a while since i did any html so i'm a bit rusty :P

 

thanks again! :)

post-183800-0-92700600-1446118805_thumb.

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/
Share on other sites
Link to post
Share on other sites
Posted

Try this:

h1 {    margin:0;    padding:0;}

CPU: Intel i5-4590 | Motherboard: Asus H97M-E | GPU: Sapphire Nitro R9 390 | RAM: 2x4Gb Kingston HyperX Fury Black | SSD: Sandisk Plus 240Gb | HDD: Seagate 250Gb  | PSU: Seasonic G650 80+ Gold | Case: NZXT S340

I am who I am.

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373768
Share on other sites
Link to post
Share on other sites
Posted

oh, putting 0 padding on h1 aswell as the div got them very close together, thank you, but how would i make them actually touch? 

 

do the same for the div of the gray bar ? :)

CPU: Intel i5-4590 | Motherboard: Asus H97M-E | GPU: Sapphire Nitro R9 390 | RAM: 2x4Gb Kingston HyperX Fury Black | SSD: Sandisk Plus 240Gb | HDD: Seagate 250Gb  | PSU: Seasonic G650 80+ Gold | Case: NZXT S340

I am who I am.

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373777
Share on other sites
Link to post
Share on other sites
Posted

 

yeah i have, it looks like this now:

"

#nav
{ background-color: #222; padding: 0; margin: 0;
}
 
"
 
and there is still a bit of a gap :(

 

pls

 

when you do css do it like this :

 

#nav{     background-color: #222;    padding: 0;    margin: 0;}

makes it a hell of a lot easier to read once you have a lot of it :)

~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373860
Share on other sites
Link to post
Share on other sites
Posted
  • Author

pls

 

when you do css do it like this :

 

#nav{     background-color: #222;    padding: 0;    margin: 0;}

makes it a hell of a lot easier to read once you have a lot of it :)

 

yeah i did have it like that but since i had so much i found it easier to have it like a new heading every line or 2

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373941
Share on other sites
Link to post
Share on other sites
Posted

yeah i did have it like that but since i had so much i found it easier to have it like a new heading every line or 2

what program do you use ?

if you use bracket you can minimise lines.

~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373956
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I have a new question, ive just added a search bar, and it's on the left when i want it on the right.. it's in a div called "searchbar" and also in the nav div, so i went: 

 

#nav .searchbar
{
padding: 50px; 
margin: 50px; 
float: right;
}
 
ive also tried padding/margin left but i can't get it to move at all, anyone know why that is? :)
Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6373973
Share on other sites
Link to post
Share on other sites
Posted

 

I have a new question, ive just added a search bar, and it's on the left when i want it on the right.. it's in a div called "searchbar" and also in the nav div, so i went: 

 

#nav .searchbar
{
padding: 50px; 
margin: 50px; 
float: right;
}
 
ive also tried padding/margin left but i can't get it to move at all, anyone know why that is? :)

 

 

Hmm..

Do you want to do something like this ?

<html>	<body>		<div class="nav" style="width:100%; background:red;">			 			<div class="search" "style="width:10%;background:blue;float:right"> 				 			</div>		</div>	</body></html>

Sorry I can't pinpoint why it doesn't work for you. Try to compare this to your work then see what needs to be changed. :D

CPU: Intel i5-4590 | Motherboard: Asus H97M-E | GPU: Sapphire Nitro R9 390 | RAM: 2x4Gb Kingston HyperX Fury Black | SSD: Sandisk Plus 240Gb | HDD: Seagate 250Gb  | PSU: Seasonic G650 80+ Gold | Case: NZXT S340

I am who I am.

Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6374165
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Hmm..

Do you want to do something like this ?

<html>	<body>		<div class="nav" style="width:100%; background:red;">			 			<div class="search" "style="width:10%;background:blue;float:right"> 				 			</div>		</div>	</body></html>

Sorry I can't pinpoint why it doesn't work for you. Try to compare this to your work then see what needs to be changed. :D

 

not sure what happened but i opened it up again today and the search bar worked, it was like it didn't want to use the css last night, but would today? :P .. but now my footer is doing the same thing.. i declared the footer:

 

HTML: 

 

<div id = "Footer">
<p> random text  </p>
</div>
 
then in the CSS i put:
 
#footer
{
margin: 0px;
width: 100%
color: blue;
background-color: #666;
height: 75px;
}
 
.. it's weird sometiems stuff doesn't work and i have no idea why since it all looks right.. i've opened and clsoed the div, ive used the correct caling "#" for ID "." for class... but the css just doesn't seem to apply, even tho 90% of the other things work fine from the same css file.. :(
 
 
edit: that moment you realise css is caps sensitive... *face palm* haha
 
thanks for all the help guys :)
Link to comment
https://linustechtips.com/topic/475635-htmlcss-help-please/#findComment-6379217
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
 Share
Go to topic listing Programming

×