Copy link to clipboard
Copied
Hello I am trying to move the tabs for my navigation further right and am having trouble figuring out how to do that. Can someone please help me with this? I appreciate any help.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="webpage-layout.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vidaloka&display=swap" rel="stylesheet">
</head>
<nav>
<div class="container">
<a href="about.html">About </a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</div>
<div id="logo">
<img src="working-graphics/logo.png" width="90" height="80">
</div>
</nav>
<body>
<main>
<h1 align="left">
Project One
</h1>
<div style="position:relative; height:60px;">
<img src="working-graphics/star.png"
style="position:absolute; top: -172px; left: 550px; right:30px; width:80px; height:80px; border:none;"
alt="picture of star">
</div>
<p style="font-size:50%;">This website is about one of my most inspirational artists, Gustav Klimt.</p>
<div class="btn-group">
<button class="button">Instagram</button>
<button class="button">Facebook</button>
<button class="button">Twitter</button>
</div>
</main>
</body>
</html>
CSS
@charset "utf-8";
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: left;
}
body {
Background: url("working-graphics/web1-home-background.jpg")
center center fixed;
background-size: auto;
}
header {
color: white;
}
main {
width: 600%;
color: #EAEAEA;
text-align:left;
padding-left: 180px;
font-family: 'Vidaloka', serif;
font-size: 3.2rem;
}
#logo{
position:absolute;
z-index: 1;
top: 4px;
left: 80px;
}
.container{
display: flex;
align-items:center;
justify-content: space-between;
float: right;
padding-right: 340px;
}
nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 10%;
text-align: center;
transition: 1s background-color;
overflow:hidden;
background-color: #EC933C;
}
nav a {
display: inline-block;
text-align: center;
color: white;
text-decoration: none;
float: right;
padding: 20px;
font-size: 2.5rem;
font-weight: bold;
font-family: 'Vidaloka', serif;
}
nav a:hover, nav a:active, nav a:focus {
color: black;
text-decoration: none;
transition: 1s background-color;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #F18307;
color: white;
text-align: center;
text-size: 1.5rem;
font-family: 'Vidaloka', serif;
}
.navigation ul li a {
float: right;
font-size: 30px;
text-decoration: none;
color: white;
}
.btn-group .button {
background-color: black;
border: 3px;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
top: 90%;
transition: .25s background-color;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
.btn-group .button:hover {
background-color: #EC933C;
}
header img {
float: left;
padding: 8px;
}
A quick Bootstrap demo: This is responsive on mobile devices.
Copy & paste code into a new, blank HTML page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXt
...
Copy link to clipboard
Copied
Sorry to be blunt but your code is a mess. It's unclear what you're trying to do.
Can you show us a picture of what you're trying to achieve? A hand sketch would suffice.
Can I ask why you're not using a Bootstrap Starter Template in DW?
File > New > Starter Templates > Bootstrap Template...
It will save you a lot of time and tedious manual coding.
Copy link to clipboard
Copied
I understand... I'm in a beginner class and trying to make something like this. I have not actually learned how to use bootstrap yet.
Copy link to clipboard
Copied
A quick Bootstrap demo: This is responsive on mobile devices.
Copy & paste code into a new, blank HTML page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/**custom styles**/
body {
min-height: 100vh;
padding-top:25vh;
}
.flex-grow { flex: 1; }
/**CHANGE CLASS COLOR TO ORANGE**/
.bg-primary {background-color:#EC933C!important;}
.navbar a {font-size:1.35rem;
text-transform:uppercase}
</style>
</head>
<body class="d-flex flex-column bg-dark text-light">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-light navbar-expand-lg bg-primary justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded-circle" src="https://dummyimage.com/365x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!--end navbar-->
<!--BEGIN MAIN CONTENT-->
<main class="container flex-grow">
<div class="row h-100">
<!--COL 1-->
<div class="col-md-6 border-warning border-top border-bottom">
<h1 class="p-2">Hello World!</h1>
<h2 class="p-2 text-warning">Welcome to Bootstrap 4 in Dreamweaver.</h2><p class="p-2">On short pages, footer remains at viewport bottom.
</p>
<p class="p-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus debitis, voluptatem, nulla, dolor qui pariatur quo reprehenderit at labore dicta iure earum! Facilis itaque quidem, placeat! Iste, rerum aut sapiente.</p>
<p class="p-2">
<a class="btn btn-outline-warning" href="https://www.w3schools.com/bootstrap4/" title="Visit W3Schools.com">Bootstrap 4 Tutorials </a></p>
</div><!--/end col 1-->
<!--COL 2-->
<div class="col-md-6">
<p class="text-center">
<img class="img-fluid" src="https://placeimg.com/400/500/arch" alt="placeholder" title="Tooltip here...">
</p>
</div><!--end col 2-->
</div><!--end row-->
</main><!--end main-->
<!--BEGIN FOOTER-->
<footer class="bg-primary text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
<p>Lorem ipsum dolar...</p>
</div>
</div><!--end row-->
</div><!--end container-->
</footer><!--end footer-->
<!--supporting scripts, first jQuery then Popper then Bootstrap-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>
</html>
Copy link to clipboard
Copied
Thank you so much.