Fairly new to web development. I am attempting to make a responsive website for both mobile and desktop. I'll be honest, its terrible right now. But I'm working on it. I currently have 2 major issues that I've been fighting with for about a full day now. Also Yes I am running django on the backend and vue as a cdn on the front.
I have deployed rellax js into the website for a paralax effect however its creating an ugly overlap and I can't seem to get ride of it.
Once I deployed rellax js my text that was supposed to be center of the landing page disappeared to the bottom. I would like it centered.
Could anyone help me with these issues? Also any input as to how to make this mobile friendly would be awesome, I was just going to lock the images at a certain size if the screen was small.
HTML
{% include 'core/navbar.html' %} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "css/style.css" %}" />
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css"
/>
<title>Tester Site</title>
</head>
<body>
<section id="hero" class="d-flex align-items-center">
<div id="bg">
<div class="bg">
<img src="{% static "media/ocean.png" %}" class="bg" alt="" data-rellax-speed="2" data-rellax-percentage="0.5" />
<img src="{% static "media/girl.png" %}" class="girl" data-rellax-speed="7" data-rellax-percentage="0.5" style="top: -195px; height: 1000px; width: auto;" />
</div>
</div>
<div
class="col-sm-2"
data-aos="zoom-in"
data-aos-delay="100"
>
<h1>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">x</span>
<span class="blast" aria-hidden="true" style="opacity: 1">p</span>
<span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 8px">l
</span>
<span class="blast" aria-hidden="true" style="opacity: 1">o</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
</h1>
<h2>
<span class="blast" aria-hidden="true" style="opacity: 1">C</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">a</span>
<span class="blast" aria-hidden="true" style="opacity: 1">t</span>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 3px"
>e</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>a</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
</span>
</h2>
About Me
</div>
</section>
<footer id="footer" data-rellax-speed="10" data-rellax-percentage="-1.0"></footer>
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<br>
<h2>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="https://webp.bearsofficialsstore.com/237169917.webp" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>Illustrator & UI/UX Designer</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Birthday:</strong> 1 May 1995</li>
<li><i class="bi bi-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Phone:</strong> +123 456 7890</li>
<li><i class="bi bi-rounded-right"></i> <strong>City:</strong> City : New York, USA</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Age:</strong> 30</li>
<li><i class="bi bi-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="bi bi-rounded-right"></i> <strong>PhEmailone:</strong> email#example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Video Editing <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Audio Editing <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Content Creation <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
</div>
</template>
<br>
<br>
<br>
<br>
<!-- End Hero -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax#master/rellax.min.js"></script>
<script>
// Center all the things!
var rellax = new Rellax('.girl', {
center: false
});
var rellax = new Rellax('.bg', {
center: true
});
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<script>
var _CONTENT = [
"Simple Life",
"Meaningful life",
"Positive Life",
"masterpiece"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 60);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 120);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>
Image 1
Image 2 after scrolling down
as you can see the background image that is being scrolled over is popping out on the other side and looks nasty. Any idea how to fix that?
You can also see how the about btn and the txt are all right there at the bottom and not at the top and centered where I am trying to put them.
Any help would be amazing!!
Related
Hello i am stuck in this problem. I have 2 Rows and 4 Columns ( col-md-8 & col md-4 in each row).
Structure is like below (also attached screenshot and code):
Inside container
Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion]
Row 2 Column 1 (md-8) Row 2 Column 2 (md-4)
The Column 2 of Row 1 is accordion and when it is expanded it takes whole row 2 with it but i want it to take just column below it which is Row 2 Column 2
See the attached images to have a better understanding:
R2C1 has already space greater than R2C2
When accordion is expanded R2C1 gets too much extra space as compared to R2C2
Is there any thing i am missing or fix this? Thank you.
Here is the code demo
https://stackblitz.com/edit/bootstrap-5-q5cctv?file=src%2Findex.html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 1 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R1 C2</span>
<!-- <i class="bi bi-printer-fill"> bi bi-envelope-at-fill </i> -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 2 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R2 C2</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
If you don't want the content in second row pushed down after the accordion show, you shouldn't put them on different rows.
Inside container you can use structure like this:
<div class"row">
<div class="col-8">
<div>Some content here</div>
<div>Some content here</div>
</div>
<div class="col-4">
<div>Some content here</div>
<div>Some content here</div>
</div>
</div>
Please note that I removed structures like this:
<div class="row">
<div class="col-12">
Some content here
</div>
</div>
because they are not needed here and you should use flexbox wisely.
Code snippet below, you can run it full page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 1 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 2 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
R1 C2
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
R2 C2
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 4 - the content in the navigation bar moves slightly to the right when the page is shorter than the screen height - this doesn't happen with longer pages. I have posted the code from two pages. A home page which is the longer page and a login page which is shorter and twitches.
I am wondering if the solution is to give a minimum height for the content - though I would prefer not to override Boostrap
Longer content with static non twitching navbar
<!-- head start -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Home page of MVC test </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- head end -->
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item active'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- page content start -->
<div class="container">
<!-- start of row -->
<div class="row">
<!-- page content left start -->
<div class="col-md-8">
<h1 class="page-header">
Home </h1>
<h2 ><a href = "#" >A first post - I do say</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 11:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
<h2 ><a href = "#" >A second post</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 16:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
<!-- page content left end -->
<!-- page content right start -->
<div class="col-md-4 bg-light ">
<!-- Blog Search Well -->
<div class="pt-3 ml-1">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="pt-1 ml-1">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="bg-light">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
<!-- page content right end -->
</div>
<!-- end of row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- page content end -->
Shorter content with content that moves or twitches to the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>This is a login title </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item active'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="col-md-6 mx-auto">
<div class="card card-light bg-light mt-5">
<h2>Login to your account</h2>
<p>Please fill in your credentials</p>
<form action="http://mvc.test/login" method="post" >
<div class="form-group">
<label for="email">Email: <sup>*</sup></label>
<input type="email" name="email" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<label for="password">Password: <sup>*</sup></label>
<input type="password" name="password" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Login" class="btn btn-success btn-block">
</div>
<div class="col">
Don't have an account? Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" >
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
thanks C
html {
overflow-y: scroll;
}
This is a solution to my 'twitching' nav bar, see above. I've read that this is not a good CSS and that it doesn't work in opera - however I've seen that the BBC website uses this if that means anything.
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
I am trying to use Bootstrap carousel in my website but I am not able to center the content in the carousel. I've tried using Grid but that didn't work out well. How can I solve this problem? Please take a look at my code and the image that has been provided below. I haven't used any CSS yet for the carousel.
<section class="services-about">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-columns">
<div class="card card-effects">
<img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
style="height: 10%; width: 15%;">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
WEB DEVELOPMENT
</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">Lorem
ipsu dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-columns">
<div class="card card-effects">
<img src="" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
MARKETING</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">
Lorem
ipsum dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
Please check this image to see the carousel problem
You should be able to use position to do that.
If you add:
.carousel-item {
position: relative;
}
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
Your content should get centered in the middle of the slide. :)
Try the below one.. add style="margin:auto" to card
<div class="card" style="width:400px; margin:auto;">
<div class="carousel-caption">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
Since you are using bootstrap classes:
Trying using d-flex justify-content-center align-items-center on parent div element.
Also, I strongly suggest you stop using css inline styling and put your css into a separate file.
Why I am I not being able to apply padding-top and margin-top in my html file? Can Someone please help me with what i may be doing wrong? The following are the main tags:
body{
background-color: #1e2a32;
margin:0 auto;}
#pagewrap{
width:1250px;
height:auto;
margin:auto;
}
Have added the html mark up:
<!doctype html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" class="csstransforms csstransforms3d csstransitions"><head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cure Sight Laser Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap"> <!--pagewrap start-->
<!--header start-->
<div id="header">
<div class="top">
<span style="margin-left:50px;">
<img src="images/phone.png">
<span class="text1">+00 000 000 00 </span>
<img src="images/mail.png">
<span class="text1">info#curesightindia.com</span>
<contact>Contact Us </contact>
</span>
<span style="margin-left:450px; margin-top:30px;">
<img src="images/twitter.png">
<span style="padding-left:4px;"><img src="images/facebook.png"></span>
<span style="padding-left:4px;"><img src="images/googleplus.png"></span>
<span style="padding-left:4px;"><img src="images/linkedin.png"></span>
<span style="padding-left:4px;"><img src="images/quora.png"></span>
</span>
<!-- search form -->
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button">
</div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform"
action="#">
<div class="search-text">
<input type="text"
value="Search..." name="s" id="s" autocomplete="off" data-default="Search...">
</div>
<input type="submit"
id="searchsubmit" value="Go!">
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div><!--top end-->
<div class="logo"><br>
<span style="margin-left:30px;"><img src="images/logo.png"></span> </div><!--logo
end-->
<div class="navigation">
<br>
<!-- Navigation -->
</div><!--navigation end-->
<div class="bottom">
</div><!--bottom end-->
</div> <!--header end-->
<div id="slider">
</div><!--slider ends-->
<div class="primary">
<div class="primary_box1">
<span class="text2" style="padding-left:50px; padding-top:0px;">Why Choose Us</span>
<br>
<div class="text3";>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box1 end-->
<div class="primary_box2">
<span class="text2" style="padding-left:50px;">Dr. Parimal Desai</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box2 end-->
<div class="primary_box3">
<span class="text2" style="padding-left:50px;">Myths About lasik</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box3 end-->
</div><!--primary end-->
<div class="secondary">
<div class="side-left">
<div class="side-left_top"> <span class="text5"> Video </span> <a href="#"> <img
src="images/view-all-btn.png" width="57" height="13"></a></div>
<span style="margin-right:30px;"> </span>
</div><!--side-left end-->
<div class="side-right">
<div class="side-right_top"> <span class="text5">Testimonials </span><a href="#">
<span style="margin-left:5%; margin-top:3px;"><img src="images/view-all-btn.png"
width="57" height="13"></span></a>
</div>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident. </p>
<br>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident.</p>
</div><!--side-right end-->
</div><!--secondary end-->
</div><!--content end-->
<!--footer start-->
<div id="footer">
<br><br>
<span class="text4" style="padding-top:50px; padding-left:480px;">Copyright 2013
by Cure Sight Laser Centre. All Right Reserved.</span>
<span style="margin:0px 0 0 50px"></span> <a href="#top">
<img src="images/to-the-top.png" width="67" height="13"></a>
</div><!--footer end-->
</div><!--pagewrap end-->
</body>
</html>
Is it happening beacuse i've added the percentage value?
`
Try something like this instead:
You have too much html to give you an accurate answer --- Please provide CSS to give you a better answer.
See here: http://jsfiddle.net/aLSXn/3/
HTML:
<div id="container">
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>
<li class="main-nav-link">Nav1</li>
<li class="main-nav-link">Nav2</li>
<li class="main-nav-link">Nav3</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body {
width:100%;
background:lightgray;
}
#container {
width:100%;
}
#main-header {
display:block;
}
#logo {
position:absolute;
top:0;
left:0;
}
#main-nav {
display:block;
background:gray;
margin:5em 6em;
}
#main-nav ul {
list-style:none;
}
#main-nav .main-nav-link {
display:inline-block;
}
#main-nav .main-nav-link a {
display:inline-block;
padding:0.8em 1em;
text-decoration:none;
color:white;
font:bold 1em arial;
}
See here: http://jsfiddle.net/aLSXn/3/