Need help with code on website (noob)


Joined
Jul 18, 2022
Messages
1
Reaction score
0
Hey guys, I’m trying to make a test website in brackets and I think my code is all over the place. Please help correct this. I couldn’t get my img under my h1 at the top with IDs and classes also. I’m trying to make a brochure website so it’s all supposed to be on one page but I need to fix my header and have my buttons up there too.


HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ABC Optical</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<h1>ABC Optical <img src="eyeicon.png" id="eyeicon"> </h1>

<header>

<nav>
<ul>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Services </a>
</li>
<li>
<a href="#"> Contact </a>
<li>
<a href="#"> Location </a>
</li>
</ul>
</nav>
</header>
<section id="about">
<p>About ABC Optical
We are a Brisbane based company which is well regarded locally. We are recognised as being able to manage children’s needs with a professional caring approach. We employ two full-time, in-store qualified optometrists able to diagnose and treat a number of eye related problems. Our optometrists strive to make a positive difference to the health and well-being of our customers, endeavoring to obtain the best visual outcome so that customers realise their full potential in work, study, sport and leisure.
</p></section>


<section id="services"><img src="kidglasses.png" ALIGN=”right”/>
<ul>
<li>Eye Examinations (may be bulk-billed)</li>
<li>Spectacles (may be bulk-billed to private Health Fund optical cover)</li>
<li>Diabetic eye examinations</li>
<li>Colour Vision assessments</li>
<li>Macular Degeneration tests</li>
<li>Glaucoma and eye pressure testing</li>
<li>Checks for Cataracts</li>
<li>Clearness of vision (myopia, hyperopia, astigmatism)</li>
<li>Focusing ability (Presbyopia)</li>
<li>Eye muscle movement and control</li>
<li>Amblyopia (lazy eye)</li>
<li>Contact lens fitting and management</li>
<li>Referrals for eye laser surgery</li>
<li>Mining and Industrial Safety Spectacles</li>
<li>Advice on the correct fitting of good quality sunglasses(both prescription and non-prescription,in both adults and children,particularly in a sporting environment)
</ul>
</section><img id="kidglasses">

<section id="location"><p style="position:relative; left:80px; bottom: 70px; right: 20px;">
<iframe src="https://www.google.com/maps/embed?p...0!3m2!1sen!2sau!4v1658049385959!5m2!1sen!2sau" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</p></section>

<section id="contact">
<form action="action_page.php">

<label for="fname"></label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname"></label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="email"></label>
<input type="text" id="email" name="Email" placeholder="Your email..">


<label for="subject"></label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

<input type="submit" value="Submit">
</form>
</section>

<section id="contacta">
Our phone number is 07 3256 7101.
</section>

<section id="hours">
<ul style="list-style-type:none;">
<li>Our trading hours are:</li>
<li>Mon – Thurs: 9am - 5.30pm</li>
<li>Fri: 9am - 9pm</li>
<li>Sat: 9am - 5pm</li>
<li>Sun: 10am - 5pm</li>
</ul>
</section>


<article></article>
<aside>
<img scr>
</aside>

<footer>
<p></p>
</footer>
</body>
</html>

CSS:

body {
line-height: 1.5;
}

h1{
text-align: center;
font-family: sans-serif;
font-size: 20px;
border: 5px solid #385170;
height: 80px;
width: 200px;
margin: auto;
padding: 30px;

}

#eyeicon {
float: 0px;
margin-top: 3px;
object-position: center top;
position: relative;
top: 1px;
margin: auto;
}

p {

}

section {
min-height: 35vh;
width: 85%

}

#about {
font-family: sans-serif;
font-size: 14px;
margin: auto;
margin-top: 2%;
margin-bottom: 15%;
width:75%;
height:50px;
padding:50px;
box-sizing:border-box;
background-color: white;
border-radius:1px;
border: 5px solid #385170;
color:black;

}

#services {
min-height: 70vh;
font-family: sans-serif;
font-size: 14px;
margin-right: 10;
margin-top: 1%;
margin-left: 0%;
width:75%;
height:60px;
padding:50px;
box-sizing:border-box;
background-color: white;
border-radius:1px;
border: 5px solid #385170;
color:black;
position: relative;
top: -120px;
margin: auto;
}

img {
float:right;

}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 50%; /* Full width */
padding: 6px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 3px; /* Add a top margin */
margin-bottom: 9px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #385170;
color: white;
padding: 6px 10px;
border: none;
border-radius: 2px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #385170;
}

/* Add a background color and some padding around the form */
.container {
border-radius: 2.5px;
background-color: #385170;
padding: 10px;

}

#contact {
position: absolute;
top: 1107px;
left: 700px;

}

#contacta {

}

#hours {
position: absolute;
top: 1107px;
left: 447px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
border: 5px solid #385170;
height: 50px;
width: 150px;
margin: auto;
padding: 30px;

}

footer p {
font-size: 0.9em;
}
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
152
Reaction score
24
Please use the </> icon in the toolbar above you and post your code in the box that appears.
It would be a course on coding to show you how to correct all your problems. Why did you do all that when you had issues with the first element? Just get the h1 and image the way you want first before coding anything else.

What I would suggest is to look for a free template that you can live with and use that. Every hosting site has hundreds of these.
 
Ad

Advertisements

Joined
Jul 12, 2020
Messages
32
Reaction score
2
you layer it...

before:
Code:
<h1>ABC Optical <img src="eyeicon.png" id="eyeicon"> </h1>
after:
Code:
<img src="eyeicon.png" id="eyeicon"><h1>ABC Optical</h1>

That way the image loads first and the heading is positioned over it.

1. start with main objects:
Code:
<!-- header starts -->
<div>
</div>
<!-- header ends -->

<!-- main body starts -->
<div>
</div>
<!-- main body ends -->

<!-- footer starts -->
<div>
</div>
<!-- footer ends -->

2. begin building each object.
Code:
<!-- header starts -->
<div>
<img src="eyeicon.png" id="eyeicon"><h1>ABC Optical</h1>
<nav>
<ul>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Services </a> </li>
<li> <a href="#"> Contact </a>
<li> <a href="#"> Location </a> </li> </ul>
</nav>
</div>
<!-- header ends -->

<!-- main body starts -->
<div>

<!-- about section  starts -->
<div>
<h2>About Us</h2>
</div>
<!-- about section  ends -->

<!-- services section  starts -->
<div>
<h2>Services</h2>
</div>
<!-- services section  ends -->

<!-- contact section  starts -->
<div>
<h2>Contact</h2>
</div>
<!-- contact section  ends -->


</div>
<!-- main body ends -->

<!-- footer starts -->
<div>
</div>
<!-- footer ends -->

3. Once all information is applied then you start apply layout and design styling to one object or nested object at a time. Over time you can condense the stylesheet coding for specifics. When styling always begin with the basics.
Code:
object/element {
   positioning properties
   dimension properties
   typeface properties
   spacing properties
   design[color] properties
}

Yours from above:
#about {
font-family: sans-serif;
font-size: 14px;
margin: auto;
margin-top: 2%;
margin-bottom: 15%;
width:75%;
height:50px;
padding:50px;
box-sizing:border-box;
background-color: white;
border-radius:1px;
border: 5px solid #385170;
color:black;

}

New:
#about {
width:75%;
height:50px;
font-family: sans-serif;
font-size: 14px;
padding:50px;
margin: auto;
margin-top: 2%;
margin-bottom: 15%;
background: #ffffff;
border: solid 5px #000000;
box-sizing:border-box;
border-radius:1px;
color: #000000;
}
Setting the properties up from positioning to color scheme makes things a lot easier.
Simply change out the stylsheet to apply a different color scheme.

Code:
nature.css
#about {
background: #ffffff;
border-color: #000000;
color: #000000;
}

I always said there was a problem with teaching HTML "AND" CSS instead of teaching HTML "THEN" CSS.
c1lonewolf
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top