Reputation:
Can't align correctly using CSS/HTML
i'm new to programming and webdev and im kinda lost rn. I am supposed to recreate a certain website page for a uni work but i am struggling a little bit and i couldn't find out what i am doing wrong.
Ok, finally the question: How can i align these two texts? I mean, make them side by side. And what should i study to learn how to align them?
This is what i have done so far This is how it's supposed to look like
Probably a terrible code but here it is
HTML CODE:
body {
font-family: 'Source Sans Pro', sans-serif;
background-image: url(https://i.imgur.com/qS3SkhD.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
.call {
position: absolute;
right: 400px;
font-size: 30px;
}
.number {
position: absolute;
right: 100px;
font-size: 30px;
}
.phone {
position: absolute;
right: 300px;
height: 90px;
}
.logo {
position: relative;
left: 1px;
height: 90px;
margin-inline-start: 100px;
}
.enquire1 h1 {
font-size: 2rem;
margin-inline-start: 300px;
margin-inline-end: 1300px;
display: block;
margin-block-start: 4em;
margin-block-end: 1em;
margin-top: 2cm;
}
.enquire1 h3 {
font-size: 1.2rem;
margin-inline-start: 300px;
margin-inline-end: 1300px;
display: block;
margin-block-start: 4em;
margin-block-end: 1em;
}
.enquire1 p {
display: block;
margin-block-start: 4em;
margin-block-end: 1em;
margin-inline-start: 300px;
margin-inline-end: 1300px;
margin-bottom: 2cm;
}
.enquire2 {
text-align: right;
margin-block-start: 4em;
margin-block-end: 1em;
margin-inline-start: 300px;
margin-inline-end: 600px;
margin-bottom: 2cm;
}<body>
<div class="div1">
<img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
<h3 class="call"> Call us </h3>
<h3 class="number"> +61 3 9639 0543</h3>
</div>
<a href="https://www.lonsdaleinstitute.edu.au/">
<img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
</a>
<hr>
<div class="enquire1">
<h1>The opportunity for a first class education, in a world-class city?</h1>
<h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
<p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
<p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
<p>And that's where Melbourne's Lansdale Istitute is different</p>
</div>
<div class="enquire2">
<h2>Enquire Now</h2>
<p>Save $200 on our Enrolment fee</p>
<form>
<label for="username">First Name</label>
<input type="username" placeholder="John" required>
<div>
<label for="username">Phone Number</label>
<input type="username" placeholder="Your Number" required>
</div>
<label for="username">Email:</label>
<input type="email" placeholder="your email" required>
<div>
<label for=birthday>Course</label>
<select name="Course">
<option value="Course">Choose your Course</option>
<option value="English">English</option>
<option value="Healthcare">Healthcare</option>
<option value="IT">IT</option>
<option value="Engineering">Engineering</option>
</select>
</div>
<input type="submit">
</div>
<hr>
</body>
</html>thanks!!!!!!
Upvotes: 1
Views: 72
Answers (5)
Reputation: 37
You can study CSS's display: flex and display:grid properties, they both are one of the most modern ways to align elements on a web page. Give them a detailed read and it will help you understanding the element alignment in CSS, better.
Upvotes: 0
Reputation: 1
body {
font-family: 'Source Sans Pro', sans-serif;
background-image: url(https://i.imgur.com/qS3SkhD.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
.container-box {
padding: 1rem 3rem;
}
.d-flex {
display: flex;
}
.enquire1,
.enquire2 {
width: 50%;
max-width: 50%;
display: inline-block;
}
.call {
position: absolute;
right: 400px;
font-size: 30px;
}
.number {
position: absolute;
right: 100px;
font-size: 30px;
}
.phone {
position: absolute;
right: 300px;
height: 90px;
}
.logo {
position: relative;
left: 1px;
height: 90px;
margin-inline-start: 100px;
}
.enquire2 {
align-self: flex-start;
text-align: right;
}<div class="div1">
<img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
<h3 class="call"> Call us </h3>
<h3 class="number"> +61 3 9639 0543</h3>
</div>
<a href="https://www.lonsdaleinstitute.edu.au/">
<img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
</a>
<hr>
<div class="d-flex container-box">
<div class="enquire1">
<h1>The opportunity for a first class education, in a world-class city?</h1>
<h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
<p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
<p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
<p>And that's where Melbourne's Lansdale Istitute is different</p>
</div>
<div class="enquire2">
<h3>Enquire Now</h3>
<p>Save $200 on our Enrolment fee</p>
<form>
<label for="username">First Name</label>
<input type="username" placeholder="John" required>
<div>
<label for="username">Phone Number</label>
<input type="username" placeholder="Your Number" required>
</div>
<label for="username">Email:</label>
<input type="email" placeholder="your email" required>
<div>
<label for=birthday>Course</label>
<select name="Course">
<option value="Course">Choose your Course</option>
<option value="English">English</option>
<option value="Healthcare">Healthcare</option>
<option value="IT">IT</option>
<option value="Engineering">Engineering</option>
</select>
</div>
<input type="submit">
</div>
</div>
<hr>I believe this is what was required. You can enclose the enquire1 and enquire2 within a single div and apply display: flex for it. Also, if you wish to make the site responsive I suggest you to use bootstrap (https://getbootstrap.com/). This link provides a wide range of bootstrap classes with examples: https://hackerthemes.com/bootstrap-cheatsheet/
Upvotes: 0
Reputation: 19
You have to use flex-box for this. Wrap enquery1 and enquery1 in a seperate div and use flex box on the parent div. I will nake a dummy code and share a link with you follow it. I suggest you to learn flex-box. Flex box easily solves this issue.
<div class ="enquireContainer">
<div class="eqnuire1"> your existing code here ....... </div>
<div class="eqnuire1"> your existing code here ....... </div>
</div>
///////////css for the enquireContainer////////////
.enquireContainer{
display: flex;
flex-direction: row
}
Upvotes: 0
Reputation: 686
Look, I can provide you with a direction to work in. Here, you can see that you need a two column layout, first one for the info, and, the second one for the form. So I would suggest you to check this link for your root or base model of page, then you can put the content in the respective columns and then can edit them as per your needs.
If you want to make your form to look good, then you can check this link for simple tutorial and this link for attractive form designs for free.
Upvotes: 0
Reputation: 5335
I wrapped those 2 sections into a wrapper class and displayed it as flex display: flex;
I also got rid of a bunch of your padding and margins as it was screwing it up. Look what I did here:
body{
font-family: 'Source Sans Pro', sans-serif;
background-image: url(https://i.imgur.com/qS3SkhD.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
.call{
position: absolute;
right: 400px;
font-size: 30px;
}
.number{
position: absolute;
right: 100px;
font-size: 30px;
}
.phone{
position: absolute;
right: 300px;
height: 90px;
}
.logo{
position: relative;
left: 1px;
height: 90px;
margin-inline-start: 100px;
}
.enquireW {
display: flex;
}<body>
<div class="div1">
<img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
<h3 class="call"> Call us </h3>
<h3 class="number"> +61 3 9639 0543</h3>
</div>
<a href="https://www.lonsdaleinstitute.edu.au/">
<img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
</a>
<hr>
<div class="enquireW">
<div class="enquire1">
<h1>The opportunity for a first class education, in a world-class city?</h1>
<h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
<p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
<p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
<p>And that's where Melbourne's Lansdale Istitute is different</p>
</div>
<div class="enquire2">
<h2>Enquire Now</h2>
<p>Save $200 on our Enrolment fee</p>
<form>
<label for="username">First Name</label>
<input type="username" placeholder="John" required>
<div>
<label for="username">Phone Number</label>
<input type="username" placeholder="Your Number" required>
</div>
<label for="username">Email:</label>
<input type="email" placeholder="your email" required>
<div>
<label for=birthday>Course</label>
<select name="Course">
<option value="Course">Choose your Course</option>
<option value="English">English</option>
<option value="Healthcare">Healthcare</option>
<option value="IT">IT</option>
<option value="Engineering">Engineering</option>
</select>
</div>
<input type="submit">
</form>
</div>
<hr>Upvotes: 1