Fix div to center of page, but don't overflow when resizing - html

I'm trying to make a navbar that fits the length of another div where I'm listing some data. I want it to be fixed to the top of the page no matter where you scroll. I have it like that, but when you resize the window from the right side and make it smaller, it'll eventually go off the page. I'm pretty sure it has something to do with the fact that I'm translating it over 50% and it's not caring if it's going off screen, so is there some sort of way to easily counteract that? I'd like it to behave the way the table does. When it's about to go off screen, stop moving it over. Thanks for any help
Here is a demonstration:
http://box.endurehosting.com/contents/public/Screen-recorder-fri-jan-03-2020-21-31-14.webm
Here's the live website:
https://dev.theromdepot.com/archive.php?home
Here is my HTML:
<div id="nav-bar">
<input id="search" placeholder="Search" type="input"></input>
</br>
</br>
<div id="title-bar">
<p>Name</p>
<p>Count</p>
</div>
</div>
Here is my CSS (I'm using SCSS)
$mainBackground: #1d1f21;
$textHoverColor: #919191;
#font-face {
font-family: 'Muli';
src: url('../fonts/muli.ttf') format('truetype');
}
body {
background-color:$mainBackground;
}
a {
color:white;
text-decoration: none;
transition: color .2s;
&:hover {
color:$textHoverColor;
transition: color .2s;
}
}
#nav-bar {
position:fixed;
width:25%;
min-width:800px;
left: 50%;
transform: translateX(-50%);
background-color:grey;
padding:10px;
z-index:1;
#search {
&::placeholder {
opacity:1;
}
position:relative;
border:none;
border-radius:2px;
padding:5px;
font-size: 20px;
line-height: 10px;
&:focus {
box-shadow:2px 2px 5px darkgrey;
}
}
#title-bar{
position:relative;
color: white;
p {
display:inline-block;
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 5px;
}
}
}
#list {
margin:auto;
width:25%;
min-width:800px;
color:white;
#results {
position:relative;
top:100px;
width:100%;
.row {
font-family: Muli;
font-size: 14px;
word-spacing: 2px;
position:relative;
width:100%;
height:18px;
padding-top:5px;
p {
display:inline-block;
position:absolute;
&:nth-child(1) {
// left:5%;
}
&:nth-child(2) {
left:51%;
}
&:nth-child(3) {
left:67%;
}
&:nth-child(4) {
margin:0;
left:82.5%;
}
}
}
}
}

The problem is your min-width property, which won't let it shrink under 800px. So when you are sizing the window down and passing 800px, the navbar stays the same width.
One solution could be using media queries in order when you reach the screen-width of 800pxs, you give the css property another value.
If that min-width attribute is not needed, since you are setting the width, you can just remove it and it will work.

Related

Trying to create a hover effect that turns menu button into an x shape with a shadow clone version of the button

Firstly just want to acknowledge that my title is confusing, so sorry about that. What I'm trying to achieve is the following effect on hover:
My site is here https://wordpress-493302-3130963.cloudwaysapps.com/
I have managed to do half of what I want to achieve using css transform, but cant see to create a shadow copy of the button like in the image above. My css is as follows
.cta-button-menu:hover {
transform:rotateZ(45deg) !important;
background: #21B6CD !important;
color: white !important;
transition: 1s;
}
If this can be achieved using JS or something else that could also work but CSS would be the preference.
Didn't include html as its generated from a mega menu plugin but can do if required.
You can use ::before to apply this effect.
.wrapper{
height:300px;
background-color:gray;
}
.btn, .btn::before{
font-size:2rem;
color:white;
width:200px;
height:70px;
border:2px solid white;
transition:all 0.3s linear;
display:flex;
justify-content:center;
align-items:center;
}
.btn{
position:relative;
top:30%;
left:30%;
background-color:transparent;
}
.btn:hover {
background-color:#21b6cd;
transform: rotateZ(45deg);
border:none;
}
.btn::before {
content:"Book Now";
background-color:transparent;
position:absolute;
}
.btn:hover::before{
transform: rotateZ(-90deg);
background-color:#e72f54;
border:none;
}
<div class="wrapper">
<button class="btn">Book Now</button>
</div>
I'd recommend making 2 buttons/a tags:
body {
padding: 4em;
background-color: black;
}
.button {
position: relative;
}
.firstButton,
.secondButton {
position: absolute;
display: inline-block;
padding: 1em;
text-align: center;
color: white;
text-decoration: none;
border: 1px solid white;
}
.firstButton {
visibility: hidden;
}
.button:hover .firstButton {
transform: rotateZ(45deg);
background: #E83054;
visibility: visible;
}
.button:hover .secondButton {
transform: rotateZ(-45deg);
background: #21B6CD;
}
<div class="button">
<a class="firstButton" href="">Book Now</a>
<a class="secondButton" href="">Book Now</a>
</div>

How can I place this div next to the other one?

I was wanting to make a website, just to see if I like doing it and how it would turn out, but I can't seem to get this part done. I want the "informatie" div to be next to the "vertmenu" div and make it fill up the white part and I want the "vertmenu" div to extend till the "voetregel" div. I have no idea how to get this done and I have already tried changing the width and height to percentages, changing the positions to absolute/relative and adding a float property, but I couldn't make it how I wanted it to be. So my question in short, how can I make the "informatie" div next to the "vertmenu" div and make it fill up the white part and get the "vertmenu" div to extend till the "voetregel" div.
body {
margin:0;
padding:0;
background-color:#ffffff;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#hormenu {
background-color: rgba(0, 0, 0, 0.5);
position:relative;
text-align: center;
width:100%;
height:15%;
line-height:50px;
font-size:100%;
}
#vertmenu {
background-color: rgba(255,0,0, 0.3);
position:relative;
height:100px;
top:15%;
width:15%;
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#informatie {
background-color: rgba(0,0,255, 0.3);
position:relative;
float:left;
height:100%;
width:85%;
left: calc(15% + 6px);
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#voetregel {
background-color: rgba(0,255,0, 0.3);
position:fixed;
width:100%;
height:100px;
top:auto;
right:0;
bottom:0;
margin-left:10px
}
a.hormenu_item {
margin: 10px;
transition: color 0.3s, text-shadow 0.3s, text-decoration-line 0.3s, font 0.3s ease-in-out;
}
a:link.hormenu_item {
color: white;
text-decoration: none;
}
a:visited.hormenu_item {
color: white;
text-decoration: none;
}
a:hover.hormenu_item {
color: gold;
text-decoration:none;
text-shadow: 0px 0px 7px gold;
font-size: 30px;
}
#informatie h1, #vertmenu h1, #voetregel h2 {
color:#FF0000;
font-size:20px;
}
<body>
<div id="hormenu">
Home
Biografie
Features
Contact
</div>
<div id="vertmenu">
<h1>vertmenu</h1>
</div>
<div id="informatie">
<h1>informatie</h1>
</div>
<div id="voetregel">
<h2>voetregel</h2>
</div>
</body>
apply float:left; css in #vertmenu and #informatie
and dont use position:fixed; in #voetregel use clear:both; it will clear the float effect of above 2 div tags
position:fixed; is used for creating menubar in web site so that even with the scrolling that menubar stays at same place
You can add display: inline-block to make them next to each other. Remove position:fixed from #voetregel too.
#vertmenu {
background-color: rgba(255,0,0, 0.3);
width:15%;
margin:0px 0px 0px 0px;
}
#informatie {
background-color: rgba(0,0,255, 0.3);
width:85%;
margin:0px 0px 0px 0px;
}
#voetregel {
background-color: rgba(0,255,0, 0.3);
width:100%;
height:200px;
}
#vertmenu,
#informatie {
display: inline-block;
float: left;
}
#informatie h1,
#vertmenu h1,
#voetregel h2 {
color:#FF0000;
font-size:20px;
}
<div id="vertmenu">
<h1>vertmenu</h1>
</div>
<div id="informatie">
<h1>informatie</h1>
</div>
<div id="voetregel">
<h2>voetregel</h2>
</div>

HTML div location

I am now learning HTML and I have put a relative div in my code.
There are 2 more divs before that one but they don't collide, sadly the first two still take space above the relative one and I want it to be on top of the page.
My code :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}
<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>
I want the "Foo bar" div to go up and be on the same level as the two buttons
I changed your CSS code :
.foo
{
float:right;
margin-right: 540px;
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}
.lastpage
{
position:relative;
text-align:left;
width:20%;
float:left;
}
.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}
I added float:right and margin-right to your foo class and float:left to your lastpage and index class.
I think it should work for you !
Try adding the display: inline-block rule to make the divs appear on the same line, or float. By default, a div is block display and two divs won't come on the same line.
Another way of doing this is using the float: left property on the lastpage div to make it stay to the left and align it and the other div on the same line.
Does this solve your problem?

Positioning three divs left, center and right

This community has already been a big help. I have one noob question. I did do a search, but didn't turn up this situation, so apologies if this has been asked before.
I have a "nav" div currently sitting in a wrapper div. Nested in my nav div are three child elements that I want to position left, center, and right accordingly. I tried floating the three elements but they're all stacking on one side. I would like the logo div on the left, header in the center, and phone number on the right.
I know these can be positioned more precisely with absolute positioning, but since I'm trying to keep the layout as fluid as possible, is there another way?
Here is my HTML
<div class="wrapper">
<div class="nav">
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
<div class="phonenumber">Call us:<br>
909-256-0525</div>
</div>
And my CSS:
.wrapper{
min-width:1200px;
position:relative;
width:100%;
overflow:auto;}
.nav{
color:#FFFFFF;
font-size:1.563em;
font-weight:bold;
float:left;
font-family: Arial;
background-color:#C7C2C2;
width:100%;
height:80px;
display:inline;
}
.logo{
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
width: 50px;
color: #0E2B5E;
top: 9px;
clear: both;
float: left;
}
.header{
text-shadow:black 0.1em 0.1em 0.2em;
padding-top:40px;
clear:both;
width:300px;
text-align:center;
float:left;
}
.phonenumber{
text-shadow: black 0.1em 0.1em 0.2em;
float: left;
font-size: 1em;
padding: 5px;
}
Any general responsive design tips would also be appreciated.
Thanks!
You can use display:table; on the wrapper and display:table-cell; on all its child elements.
This treats the wrapper div as if it were a table element with the width of 100%, and all its child elements as table cells. (http://www.w3schools.com/cssref/pr_class_display.asp)
.wrapper{
width: 100%;
height:auto;
display:table;
background-color:gray;
}
.logo{
display:table-cell;
text-align:left;
width:33%;
}
.header{
display:table-cell;
text-align:center;
width:33%;
}
.phonenumber{
display:table-cell;
text-align:right;
width:33%;
}
By making the wrapper 100% and its children 33%, its now responsive too!
I cleared out your current styling to make it easier for you to read.
Fiddle: http://jsfiddle.net/mLmcfrup/
Here i can solved your problem and it is fully Responsive css code and it is working in all browser's and change width according to browser size.It can be used in mobile, pc and other resolution. I hope it helps you.
Live Working Demo
HTML Code:
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS Code:
.main
{
width:100%;
position:relative;
}
.left
{
width:20%;
float:left;
position:relative;
background-color:red;
}
.middle
{
width:60%;
float:left;
position:relative;
background-color:green;
}
.right
{
width:20%;
float:left;
position:relative;
background-color:blue;
}
Result:
To place the inner divs side-by-side, and keeping it fluid, use the css display properties table and table-cell.
.nav {
display: table;
width: 100%;
}
.nav > div {
display: table-cell;
}
Remove all the floats and stuff, and let the nav work like a table, placing it's children side by side like inline cells...
Here's a simple example of how it works (without all of your styling): http://jsfiddle.net/1co0qLx9/
Here are 2 best solutions of your concern.
I have created 2 fluid layouts based on your code.
First with "float" so that you could easily relate and implement quickly.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-float.html
Second with "box-flex". Becasue float has been out dated and you would get a chance to know about new CSS3 properties. Also box flex has no width restriction.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-box-flex.html
CSS Code with Float layout:
.wrapper {}
.nav {
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
float:left;
width:100px;
padding-top:10px;
}
.header {
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
margin:0 200px 0 100px;
padding-top:25px;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
float:right;
width:200px;
padding-top:10px;
}
HTML DIV position changes with Float layout:
<div class="wrapper">
<div class="nav">
<div class="phonenumber">Call us:<br>
909-256-0525</div>
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
</div>
</div>
CSS3 Code with Box Flex layout:
.wrapper {}
.nav {
display:box;
display:-webkit-box;
display:-ms-flexbox;
display:-moz-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-align:center;
-ms-flex-align:center;
-moz-box-align:center;
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
}
.header {
box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-moz-box-flex:1;
display:block;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
}
If required more help, Please most welcome :)

Extra padding inside a div

I m having problem to determine from where extra padding is added to a div.
The div containing the text "Video Title" has too much padding added to it. Which is very much unwanted. And i have no idea from where this extra padding is coming.
I have added the styles, the html codes and the link to a page using this sample page.
Please have a look, I'm about to go insane.
The style --
<style type="text/css">
html *
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
table.video_list
{
width: 100%;
border-collapse: collapse;
}
table.video_list td
{
padding: 5px;
width: 33%;
}
div.vid_container
{
/*float:left;*/
/*margin-bottom:15px;
margin-left:5px;
margin-right:15px;*/
position: relative;
display: inline-block;
/*width:242px;*/
margin: 10px;
/*width: 300px;*/
}
div.vid_container div.duration
{
/*background-color:#160A07;*/
/*background-color: transparent;
background-image: url(../images/backs/duration_back_58x24.png);
background-position: center center;
background-repeat: no-repeat;*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #1b1b1b;
bottom:27px;
color:#FFFFFF;
float:right;
font-size:14px;
padding:4px;
position:relative;
right:2px;
text-align:center;
width:50px;
filter: alpha(opacity = 85);
opacity: 0.85;
font-weight: bold;
}
div.vid_container div.info_holder
{
width: 248px;
margin: auto;
display: block;
}
div.vid_container div.thumb_holder
{
width: 244px;
height: 184px;
vertical-align: middle;
border: solid 1px #323434;
padding: 1px;
margin: auto;
}
div.vid_container div.thumb_holder img.thumb
{
width: 236px;
height: 176px;
vertical-align: middle;
border: solid 1px #323434;
}
div.vid_container a.title
{
color:#DBA0AC;
display:block;
font-size:14px;
height:35px;
overflow:hidden;
text-decoration:none;
white-space:pre-line;
width:248px;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container a.title:hover
{
text-decoration: underline;
}
div.vid_container div.info_holder div.info_text
{
margin-top:5px;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container div.info_holder div.time
{
color: #ccc;margin-top: 5px;font-size: 90%;
text-align: left
}
/******************************************
Videos list
******************************************/
.vid_container .site_name
{
text-transform: capitalize !important;
}
.vid_container img.thumb
{
width: 242px !important;
height: 182px !important;
border:1px solid #323434 !important;
}
/******************************************
List View
******************************************/
div.vid_container_listview
{
width: 100% !important;
}
div.vid_container_listview div.thumb_holder
{
float: left !important;
}
div.vid_container_listview div.info_holder
{
float: left !important;
margin-left: 10px;
}
div.vid_container_listview div.info_holder div.title_holder
{
min-height:30px;width:600px;
}
div.vid_container_listview div.info_holder div.info_text
{
color: #ccc;margin-top: 5px;
}
div.vid_container_listview div.info_holder div.info_text div.site_name
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.info_text div.likes_and_views
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.added_at
{
color: #ccc;margin-top: 5px;font-size: 100%;
}
div.vid_container_listview a.title
{
font-size: 16px;
font-weight: bold;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.clear
{
clear: both;
}
</style>
And the Html:
<div class="vid_container">
<div class="thumb_holder">
<a href="#" title="Brunette Teen Paige Taylor">
<img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
</a>
<div class="duration">30:16</div>
</div>
<div class="info_holder">
<div class="info_text">
<a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
</div>
<div class="time">16 days ago</div>
<div style="color: #ccc;margin-top: 5px;">
<div class="float_left site_name" style="font-size: 90%;">Youtube</div>
<div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
<div class="clear"></div>
</div>
</div>
</div>
The link to this sample page is: Sample Page
You need to change the div.vid_container a.title rule
remove the overflow:hidden and change the height:35px to
height:auto!important;
height:35px;
min-height:35px;
UPDATE
i see ... the problem is that the .duration box is positioned relative and so it remains in the flow of the DOM .. that is what takes the space above the .title..
you need to set the .duration to have position:absolute and margin-top:-27px; (and remove the bottom property
that should take care of all problems..
download firefox if you dont have it.
install firebug (an addon)
open up firebug in firefox and load your page.
right click on the div with video title and select inspect element
look at the style and computed tabs to see what is affecting the padding.
According to my Firebug addin, the extra padding is caused by these two properties of the <a> element contained in the <div>
div.vid_container a.title {
height:35px;
width:248px;
}
Disabling these rules in the css editor removed the extra padding (top and bottom).
Edit : It seems that the overflow could also be due to this property on the <div> :
div.vid_container div.info_holder div.info_text {
padding-top:1px;
}
You can try disabling this rule if it fits your needs better. It will remove the extra padding on the top of the div.
You will however still have extra space on the bottom of the title, which is caused by the height of the <a> element, as explained above.
div.vid_container a.title has a height of 35px which is making your link bigger. I believe this is what is causign the extra space you don't expect (found courtesy of firebug in firefox).
Edit: Didn't even notice the horizontal padding at first but as Thibault Falise there is just a width in there as well.
according to Firebug (which I would recommend you to use) and checking the link you provided that div has a padding of 1px and a top margin of 5px, as specified in the css. So there is no extra padding in itself.
As suggested, maybe you want to change the size of the a.title (height, width).