4 Replies - 347 Views - Last Post: 15 August 2019 - 11:41 PM

#1 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

bootstrap few questions-how can i achieve the following?

Posted 15 August 2019 - 10:11 AM

hi
I am doing some exercises with bootstrap and have few questions that I cannot solve so I hope for your help.4
I have tried a lot of things via online tutorials but cannot achieve my desired solution(the messy code is the result) and now iam lost.


my code is like follows
HTML
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <title>Ferrari 250GTO Fan Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<link rel="stylesheet" href="slog.css">
</head>
<body>

<nav class="navbar navbar-default" style="background-color: #f90000;">
  <div class="container">
  <div class="navbar-header">
  <a class="navbar-brand" <li><a href="#" class="text-light" ><h3>Ferrari 250GTO Fan Page</h3></a></li>
  </div>
  
	<ul class="nav navbar-nav navbar-right">
		<li><a href="#" class="text-light">Ferrari 250GTO</a></li>
		<li><a href="#" class="text-light">Fan page</a></li>
		<li><a href="#" class="text-light">Contact</a></li>
	</ul>
</div>
</nav>



<div class="container">

<div class="container">
  <img src="slika.jpg" id="ferrari" class="img-responsive"
  
  <div class="centered"><h1></h1></div>
  <div class="centered"><h1><p>Ferrari 250GTO></h1></</p>
  <h4>The Ferrari 250 GTO is a racing GT car which was produced by Ferrari from 1962 to 1964</h4></div>
 
 
<!--Facebook-->
<button type="button" class="btn btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button>
<!--Twitter-->
<button type="button" class="btn btn-tw"><i class="fab fa-twitter pr-1"></i> Twitter</button>
 <!--Instagram-->
<button type="button" class="btn btn-ins"><i class="fab fa-instagram pr-1"></i> Instagram</button>
  
</div>
</div>
</body>
</html>



my CSS is

.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




so first I want to get that upper left menu in one line and the color of text should be white and when moving mouse over it it should go black.

and secondly, I have to put those three social buttons under the text in the picture. and between the text and the buttons should be a line.

the end product should look like that
https://ibb.co/8X3x7F4

can someone help me out please?

Is This A Good Question/Topic? 0
  • +

Replies To: bootstrap few questions-how can i achieve the following?

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5457
  • View blog
  • Posts: 14,406
  • Joined: 18-April 07

Re: bootstrap few questions-how can i achieve the following?

Posted 15 August 2019 - 11:06 AM

What really helps us diagnose and fix these types of problems is where you can put your code on a public site that we can then access and run tools on. To try and setup what you exactly see can be time consuming for us and we may not even be able to set it up exactly how you currently have it. This is just a tip to make things speedier.

I will start by tackling your second point first. Your three buttons can go inside a single div. The div can then have a top border. You can control the distance between that border and the buttons by adding padding to the div. You can control the distance between that border and the text above it by adding margin to the div.

Here is an example on jsFiddle that shows you how this might be done...

https://jsfiddle.net/7u8n1yfs/

As for your first point, I would have to setup more to see what you see and just don't have the time. I can say that if you want it to go black on hover, check out CSS :hover...

https://www.w3school...f/sel_hover.asp
Was This Post Helpful? 0
  • +
  • -

#3 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

Re: bootstrap few questions-how can i achieve the following?

Posted 15 August 2019 - 12:27 PM

thank you for the advice(specially jsFiddle- iam totally new in this)

I have combined my code with your example and it's getting slowly clearer for me now. but still not working.

https://jsfiddle.net/nqydkz7h/2/

those social buttons and that text should be inside of the picture.

and also top right links should be in one line
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5457
  • View blog
  • Posts: 14,406
  • Joined: 18-April 07

Re: bootstrap few questions-how can i achieve the following?

Posted 15 August 2019 - 03:54 PM

Ok it appears you are trying to physically stick one tag inside others. Make sure you always close off your tags. One of the great things about jsFiddle here is that it highlights problems in pink and tells you what might be wrong.

As for some other problems, your menu on the right is stacked because you forgot to apply another bootstrap class called navbar-expand-lg. Bootstrap needs various classes to be defined in your HTML elements so that it can apply the right styling. Also you forgot to make each of the links a "navbar-item".

To stick the text inside the image, you need to make the container div (which I relabeled .car-container so it doesn't mess with bootstrap's container class) have a background image. That way it sits in the background.

I have put in several changes into your fiddle so you can take a look at what we have...

https://jsfiddle.net/xk1gq4bL/

I just grabbed an image since I didn't have yours. Take a look.

Before you continue moving on to bootstrap further, I would make sure you take a quick refresher look at how HTML tags work so you can get the idea of how some of the bootstrap classes might influence how the styling is done.

Enjoy!
Was This Post Helpful? 1
  • +
  • -

#5 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

Re: bootstrap few questions-how can i achieve the following?

Posted 15 August 2019 - 11:41 PM

i think i get the concept now. thank you for your time and explanation.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1