• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Problems moving navigation to the right

Explorer ,
Oct 06, 2021 Oct 06, 2021

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;
}

 

TOPICS
Code , How to , Other

Views

528

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 07, 2021 Oct 07, 2021

A quick Bootstrap demo:  This is responsive on mobile devices.

image.png

 

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
...

Votes

Translate

Translate
Community Expert ,
Oct 07, 2021 Oct 07, 2021

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.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 07, 2021 Oct 07, 2021

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.web about 1.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 07, 2021 Oct 07, 2021

Copy link to clipboard

Copied

A quick Bootstrap demo:  This is responsive on mobile devices.

image.png

 

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>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 07, 2021 Oct 07, 2021

Copy link to clipboard

Copied

LATEST

Thank you so much.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines