I am trying to create two navigation bars with a Title and an image in between. This is what i currently have:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
float: right;
}
.site-info {
float: right;
}
.site-avatar {
float: right;
height: 120px;
margin-left: 15px;
}
</style>
</head>
<body>
<header>
<div class="topbar">
<nav class="site-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
<img class="site-avatar" src="http://i.stack.imgur.com/xkF9Q.jpg">
<div class="site-info">
<h1>Title</h1>
<p class="site-description">Subtitle</p>
</div>
<nav class="content-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
</div>
</header>
</body>
</html>
I would like to keep the text, navigation bars and the image floating to the right.
Image of what I am trying to achieve:
Related
When I decrease the height of the browser and the footer goes out of its area, the scroll does not appear but remains at the height of 20px all the way at the bottom? I found out this is becouse i have height:calc(100%-60px); but when it is set to the 100% the browser adds a scrollbar event even if it is not needed.Here is the code of the footer.
<footer>
<div>
Website crafted and designed by
</div>
</footer>
<style>
footer {
position: relative;
bottom:20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
div {
padding: 0 var(--margin);
font-size: var(--font-size-base);
color: var(--color-gray);
}
div a {
color: #fff;
font-weight: 600;
</style>
and there is the example site when proble occours
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="About ">
<main>
<h1>A lit bit about me</h1>
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</main>
</Layout>
<style>
main {
padding: max(140px, 5%) var(--margin) 0 var(--margin);
height: 100%;
}
main h1 {
font-weight: 600;
font-size: var(--font-size-xxl);
}
main p {
padding-top: var(--margin);
font-size: var(--font-size-base);
}
</style>
And the layout conponent:
---
import "../styles/index.css";
import "../components/Navbar.astro";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Navbar />
<slot />
<Footer />
</body>
</html>
<style is:global>
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--font-size-xxl: clamp(2.4rem, 2.25vw + 1.6rem, 5rem);
--color-text: #f3f3f3;
--color-dark: #111111;
--color-bg-logo: #b86202;
--color-gray: #d9d9d9;
--margin: clamp(25px, 7vw, 125px);
--margin-spacing: clamp(5px, 1vw + 0.5rem, 15px);
}
html,
body {
color: var(--color-text);
font-family: "Lato", sans-serif;
height: 100%;
width: 100%;
}
body {
background: url("/background.webp") center / cover no-repeat fixed;
}
</style>
I am facing problems with sticky navbar on my website.
I used the code of w3schools for this navbar. The problem is that sticky effect on nav menu does not work at all. Menu just disappers during scrolling.
Link to my website
Here is how nav menu looks like:
CSS:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
You have to set the sticky code on the container to apply, not directly on the navbar. As sticky works only for siblings and not the whole page.
<div class="col-lg-12" style="
position: sticky;
z-index: 1;
top: 0;
">
<br>
<div id="navbar-complex" class="scrollmenu tab-content nav nav-tabs">
This way it works. after you have some z-index problem but this is different
#id1, #id2{
width: 50%;
float:left;
}
#id1{
background: lightgreen;
}
#id2{
background: lightblue;
}
#id1 nav{
position: sticky;
top:0;
z-index:1;
}
#id2 .navContainer{
position: sticky;
top:0;
z-index:1;
}
nav{
background: lightgray;
}
.content{
width: 100%;
height: 500vh;
}
<div id="id1">
<h1>What you are doing</h1>
<div class="navContainer">
<nav>I am supposed to be sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>
<div id="id2">
<h1> What you want</h1>
<div class="navContainer">
<nav>I am sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>
I am building a message box with title, description, and answers.
I have been struggling for days with that, even played with a Codepen, but can't figure to handle this correctly.
I need:
Title to expand to a maximum of 300px before scrolling
Description to expand to a maximum to left space if no answer (or few), distribute space say 80% of space otherwise (I will add a button to hide this space) before scrolling also
Fixed height for message number title
Messages div to expand to a maximum space left
Input area to stay at bottom and able to size up if any user input (again let's say 20% before scrolling?)
Codepen link
<div class="demoContainer">
<div class="page">
<div class="title">
<h1>My awesome title that is so long i will move everything down</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<li>
tAta
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="page">
<div class="title">
<h1>My awesome short title</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.demoContainer {
display: flex;
flex-direction: row;
}
.divider {
width: 8px;
}
.page {
height: 600px;
width: 550px;
background-color: lightgrey;
display: flex;
flex-direction: column;
overflow: auto;
}
.title {
display: inline-flex;
justify-content: space-between;
align-items: center;
max-height: 200px;
}
.title button {
width: 90px;
height: 30px;
}
.row {
display: flex;
/*flex: 1 1 100%;*/
min-height: 0;
height: 100%;
}
.colLeft {
flex: 3 1 auto;
min-height: 0;
height: 100%;
border: 1px solid blue;
display: block;
flex-direction: column;
position: relative;
/*align-items: stretch;
align-content: stretch;*/
}
.description {
border: 1px dashed black;
/*flex: 4 1 100%;*/
max-height: 60%;
overflow: scroll;
}
.between {
border: 1px solid green;
height: 1, 1em;
}
.between>p {
margin: 0;
}
.messages {
border: 1px dashed red;
/*flex: 2 100 auto;*/
overflow: scroll;
}
ul {
max-width: 100%;
}
.input {
width: 100%;
min-height: 1rem;
flex: 1 1 3rem;
display: flex;
border: 1px solid yellow;
position: relative;
bottom: 0;
}
.input>textarea {
width: 100%;
}
.colRight {
flex: 1 1 auto;
border: 1px solid black;
min-width: 150px;
overflow: scroll;
}
The one on the right is a short example of what I would like, but remove <br/> to see the problem.
I tried with display: grid, isplay: block display: flex. I can't seem to find anything satisfying my needs.
My question is: is that even possible? With CSS only?
For everyone wondering, i discovered a few things while digging into css.
First of all is you can set a 100% height on a div to take up the free space if another element is in, but if and only if you set the parent element display: flex; !
With that in mind, it comes easier.
After that, I decided to dive into JS as my problem does not seem to be solvable with CSS only.
I took advantage of the "new" position: sticky; property, and my JS can take care of position it top: 0; or bottom: 0; depending on the scrolling position.
CSS Added :
.stickyBottom{
position: sticky;
bottom: 0;
}
.stickyTop{
position: sticky;
top: 0;
}
JS Code added:
var colLeft = document.getElementsByClassName("messagesInput")[0];
colLeft.onscroll = function(){myFunction()};
// Get the navbar
var between = document.getElementsByClassName("between")[0];
var desc = document.getElementsByClassName("description")[0];
// Get the offset position of the navbar
var sticky = between.offsetTop;
//between.classList.remove("stickyBottom")
function myFunction() {
if (colLeft.scrollTop >= sticky) {
between.classList.remove("stickyBottom")
between.classList.add("stickyTop")
} else {
between.classList.add("stickyBottom")
between.classList.remove("stickyTop");
}
}
It ends up in a way better UX than I initially wanted ! :)
CodePen Link updated accordingly.
I am using Bootstrap3 for my responsive page design here. I am adding a box inside the banner content with some text inside it as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<section id="slider">
<ul class="rslides" id="modest-slider">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
</div>
<div class="slider-caption container">
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ui>
</section>
It is working fine in full screen. When I am resizing the browser the alignment is not working correctly. The box with content is not fit with the page. Any help will be appreciated!!
Try the solution with minor changes
Demo http://www.bootply.com/p6wIuR17QB
/* CSS used here will be applied after bootstrap.css */
#modest-slider {
position: relative;
}
.slider-caption {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="slider">
<ul class="rslides list-unstyled" id="modest-slider" stye="position:relative;">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/600x300&text=slider1" alt="slider1" class="img-responsive">
</div>
<div class="slider-caption container">
<div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ul>
</section>
Try this:
<div class="row" >
<!-- changing width to 100% with 600px maximum -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
This will not make the height change though, for that try:
change "height:130px;" to "height: 100%; max-height: 130px;"
You really need to read more about how Bootstrap works though as this is not a good way to use it
First, you should not assign width to your div, in case you are using bootstrap.
<div class="col-md-7" style="...width: 600px...
Using class col-md-7 assign a particular width to your section, which is in %, so that when you resize your browser, the div resizes accordingly.
But, you overwrote the width with 600px, which is a fixed width and does not flex with browser resize.
I am trying to place elements in my header. I would like to have 3 elements inline - button, image and simple text. The height of the header should be equal height of image. All elements should be centered vertically. Here's my HTML:
<div class="btn">
...
</div>
<img src="image.jpg">
<span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>
On image "a" I present expected behavior. On image "b" and "c" my results were shown.
So, the expected result is to wrap text if it doesn't fit the page. But it still should be on the right side.
Legend:
red rectangle - button
orange rectangle - image
Does anyone know what styles I should use?
You should make them:
display: inline-block
Here is pretty simple demo:
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" />
<span>lorem ipsum<br/> lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30px;
background-color: red;
}
Demo
Another way.
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: table-cell;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30p;
background-color: red;
}
.row { display: table-row; }
Demo
Try giving your span a width. That would force the line breaks in your "a" example.
HTML
<div class="header">
<div class="btn">BUTTON</div>
<img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
CSS
.header {
width: 500px;
background: dimgrey;
}
.btn, img, span {
display:inline-block;
vertical-align: middle;
}
span {
width:200px;
text-align: center;
}
http://jsfiddle.net/abN39/1