Jump to content
Please Use CODE Tags

Help (HTML confusion :/ )

Octoix
By Octoix
in Programming
 Share
Posted

Hey,

I've recently done a course on HTML, CSS, JavaScript and jQuery (and python im working on). I'm designing a website just as a test but its really not turning out great. My HTML code is featured below along with my CSS. 

My Problem:

When I'm importing an image it doesn't center in the document. I have tried setting its CSS margin-left, margin-right properties to auto. But it doesn't chnage anything. The image is 10px to the left of the screen and looks awful. And to add to this when i add a <hr /> (horizontal rule) tag underneath the hr tag is not aligning centerally either. I'm using the 960.GS framework thingy to help grid the website out but this image is doing my head in please help! I've tried resizing it to 940x400, 960x400 and 950x400 and it still wont work at 940 it moves 10px left for some reason and when its at 960 it goes over each side of the document by 10px and 950px it moves 10px left again!! WTF IS GOING ON?! (The document is 960px wide (hence the 960GS grid system but content only spans 940px of this).

 

Help my god please help! (The image im using is in attachment).

 

EDIT: THE CODE MUST BE WRONG AS I HAVE TRIED WITHOUT IMAGE AND USED A "<div class="grid_12"><p></p></div>" and set the <p> element to have a width of 940px and height of 400px. its again not centerally aligned.

 

HTML CODE:

<!DOCTYPE html><html><head>	<title>Bebo Computers</title>	<link rel="stylesheet" href="css/960.css" />	<link rel="stylesheet" href="css/reset.css" />	<link rel="stylesheet" href="css/text.css" />	<link text="text/css" rel="stylesheet" href="css/stylesheet.css" /></head><body>	<div class="container_12">		<div id="nav" class="grid_12">			<div id="topborder" class="grid_12"><hr /></div>			<div id="navbar" class="grid_12">				<ul>					<li><a href="home.html">Home</a></li>					<li><a href="x3.html">X3 Series</a></li>					<li><a href="x5.html">X5 Series</a></li>					<li><a href="x7.html">X7 Series</a></li>				</ul>			</div>			<div class="grid_12"><hr /></div>		</div>		<div class="grid_12">			<img src="images/home/slideshowback.jpg" id="slideshowback" />		</div>			<hr id="hr2"/>		<div class="grid_12">			<p id="title">Inspiring The Next Generation Of Excellence In Computing</p>		</div>		<div class="grid_6">				</div>		<div class="grid_6">				</div></body></html>
CSS CODE:
* {font-family: Arial, Verdana;color: #959494;text-align: center;}li {display: inline;}a {text-decoration: none;font-size: 16px;padding-left: 7px;padding-right: 7px;}#topborder {margin-top: 20px;}#slideshowback {margin-bottom: 20px;}#title {font-size: 16px;}

post-60999-0-32143300-1409044672.jpg

Link to comment
https://linustechtips.com/topic/204317-help-html-confusion/
Share on other sites
Link to post
Share on other sites
Posted

Hmm, I'm not entirely sure what's getting aligned where... Buuuut, a few things to note about horizontal centering, the margin:0 auto; technique does not work without first setting a width of the element you want to align to the centre. Second, if you want to do a quick test to see if the issue isn't related to the gird thingy you have going(I have no idea what that is by the way), try using the HTML5 <center></center> tag, where the content you want to centre goes in between the tag, ie. <center><div></div>

 

 

Also, I know the spelling of centre changes throughout that, stupid HTML and American spellings 

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
https://linustechtips.com/topic/204317-help-html-confusion/#findComment-2774502
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Okay thanks. I've played around with the code and It's not related to the gird framework linked with the document. 

 

Thanks for the tips and when I got rid of the image and set a <p> element to have a height of 400px and a width of 930px and a margin-left of 10px it appears centered.. even when toggling the browsers zoom etc...?

Thanks again.

Link to comment
https://linustechtips.com/topic/204317-help-html-confusion/#findComment-2774524
Share on other sites
Link to post
Share on other sites
Posted

<center> tag is not supported in HTML5 so don't use that

Use margion 0 auto

 

Also, you are missing a </div> at the end

 

you should use <nav> insted of <div id="nav"> (<nav> is a new HTML5 element ;) )

 

 

EDIT:

 

I missed the part that the image was the problem and not the whole page

To get the image to center you could just use maring-left like you said until it appears centered. Sometimes you just have to do things in a sketchy way with HTML and CSS :P

Ryzen 7 5800X     Corsair H115i Platinum     ASUS ROG Crosshair VIII Hero (Wi-Fi)     G.Skill Trident Z 3600CL16 (@3800MHzCL16 and other tweaked timings)     

MSI RTX 3080 Gaming X Trio    Corsair HX850     WD Black SN850 1TB     Samsung 970 EVO Plus 1TB     Samsung 840 EVO 500GB     Acer XB271HU 27" 1440p 165hz G-Sync     ASUS ProArt PA278QV     LG C8 55"     Phanteks Enthoo Evolv X Glass     Logitech G915      Logitech MX Vertical      Steelseries Arctis 7 Wireless 2019      Windows 10 Pro x64

Link to comment
https://linustechtips.com/topic/204317-help-html-confusion/#findComment-2774895
Share on other sites
Link to post
Share on other sites
Posted

Funny your programming background is similar to mine.... I remember this happened to me once when I started doing HTML but I can't seem to recall how I fixed it..... This was probably unhelpful for you but I really thought this similarity is amusing......

Link to comment
https://linustechtips.com/topic/204317-help-html-confusion/#findComment-2790539
Share on other sites
Link to post
Share on other sites
  • 2 weeks later...

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

×