While scaling down in browser menu has broken - flows on next line. What is wrong in code? Div width changing while scaling though it hardcoded 198px.
Without borders all is ok, but I have to use borders.
#horizontal-multilevel-menu {
border-right: 1px solid #769510;
border-left: 1px solid #cde67b;
}
#horizontal-multilevel-menu {
margin: 0;
padding: 0;
background: #a0bf38;
min-height: 52px;
width: 100%;
list-style: none;
font-size: 18px;
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#horizontal-multilevel-menu a {
display: block;
padding: 5px 10px;
text-decoration: none;
text-align: center;
padding: 15px 40px !important;
}
#horizontal-multilevel-menu div {
float: left;
border-left: 1px solid #769510;
border-right: 1px solid #cde67b;
width: 198px;
}
<div id="horizontal-multilevel-menu">
<div>1
</div>
<div>2
</div>
<div>3
</div>
<div>4
</div>
<div>5
</div>
</div>
May be you need box-sizing to correct this issue.
* {
box-sizing: border-box;
}
#horizontal-multilevel-menu {
border-right: 1px solid #769510;
border-left: 1px solid #cde67b;
}
#horizontal-multilevel-menu {
margin: 0;
padding: 0;
background: #a0bf38;
min-height: 52px;
width: 100%;
list-style: none;
font-size: 18px;
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#horizontal-multilevel-menu a {
display: block;
padding: 5px 10px;
text-decoration: none;
text-align: center;
padding: 15px 40px !important;
}
#horizontal-multilevel-menu div {
float: left;
border-left: 1px solid #769510;
border-right: 1px solid #cde67b;
width: 199px;
}
<div id="horizontal-multilevel-menu">
<div>1
</div>
<div>2
</div>
<div>3
</div>
<div>4
</div>
<div>5
</div>
</div>
Related
The question is confusing but I just want to put the 'signIn' css selector inside the 'headerRightPanel' selector and have it span that width. That is grow and shrink within it. now headerRightPanel is sitting next to headerLeftPanel which has the Float: left property. and for some reason the sign in div is expanding the whole entirety of the header which i dont want.
how can I just keep sign in inside headerRightPanel and have it expand the whole section?
html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
float: left;
width: 75%;
}
.headerRightPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
</body>
</html>
Try below things
give .headerRightPanel float: right; position: relative:
set .signIn maxWidth: 100%;
I'd try to solve it with flex:
html {
height: 900px;
border: 2px solid black;
margin: 5px;
}
body {
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE {
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER {
border: 2px solid black;
height: 175px;
margin: 5px;
/* All children shall flex */
display: flex;
}
.headerLeftPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
width: 75%;
}
.headerRightPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
/* This item shall fill remaining space */
flex-grow: 1;
}
.signIn {
border: 2px solid black;
height: 30px;
}
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
Use display: grid; in your .HEADER with grid-template-column: 75% auto; - says first column (first child-element of .HEADER) is width of 75% (of its parent-element's width) and auto to set the second column (second child-element of .HEADER) fill the rest of parents element's width.
html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
display: grid;
grid-template-columns: 75% auto;
grid-gap: 5px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.headerRightPanel{
border: 2px solid black;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
I started learning HTML/CSS recently and I'm trying to design the first page of a site by using these 2! I want to have 3 parts including logo, search box and signup button (from right to left) in the header part but I have a problem in it. The signup part doesn't stay in a row which other parts are. What's the problem with my code?
Here's my code:
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
float: right;
margin: auto;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Remove float: right and replace margin into margin-left from class .Logo.
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
margin-left: auto;
text-align: center;
background: #d1e3e6;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
All Set
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Add
display: inline;
to each of their css
eg
.Search {
display: inline;
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
display: inline;
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
display: inline;
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div>
<a href="." class="Logo">
Logo Goes Here
</a>
</div>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
</div>
Css
.header{
width: 100%;
div{
display: inline-block;
width: 33.3%;
background: yellow;
}
div:nth-child(1), div:nth-child(3){
background:red;
}
Your header class is a flex container and then you use floats for the flex items in the container. So you are mixing these two concepts, but in my experience it is better to keep it with one of them. Anything you want to achieve, you can do with flex OR with floats.
As flex is the more modern (and simple) approach, I would stick with that one. Here is a very good article about aligning items in a flex container:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Just remove the floating property because when you're using flexbox method to align the column no need to use float to align the column.
For further assistance comment for more information.
* {
box-sizing: border-box;
position: relative;
}
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('https://via.placeholder.com/200') no-repeat right center;
height: 93px;
width: 300px;
margin-left: auto;
}
.Search {
height: 93px;
width: 220px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
I'm attempting to make a login page for a website, https://essaydapp.com to submit and try and get into the application. I'm trying to mimic their design (see link) but I'm having some issues:
Screenshots:
https://imgur.com/w2GAphF
https://imgur.com/rimWY0s
In the first screenshot you can see the little 1px dashed border, I would like that to be the height of the entire page rather than the form only.
In the second screenshot you can see on the edges of the page and top there is the white color, but I would like that to be blue too. Thanks for any help in advance.
form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}
<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
This code removes any padding from left and right.
I hope that's what you want.
body{
border: 1px dashed;
backgroud-color: #e7f3f6;
margin-left: 0px;
margin-right: 0px;
}
Your existing code is somewhat messy. Instead, I suggest to use the following flex-box solution
body {
padding: 0;
margin: 0 auto;
background-color: #007da5;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form {
display: flex;
width: 75%; /*Set the width required*/
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e7f3f6;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
img {
width: 300px;
height: 300px;
padding-bottom: 60px;
padding-top: 30px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 85%;
}
input[type=text],
input[type=password] {
width: 85%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
<form>
<img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
I need to place a picture in a box on the right of the sidebar. div-box has certain size and border.
If i set the style to a picture, it enlarges to the size of the box, when i need it to be 100%.
If i set the style to a box, the box' borders expand to a sidebar.
Please advise.
.sidebar {
background: white;
height: 240px;
width: 240px;
float: left;
padding: 40px 46px 46px 46px;
}
.sidebar-button{
display: block;
height: 28px;
width: 240px;
border-top: #c8c8c8 1px solid;
border-right: #c8c8c8 1px solid;
border-left: #c8c8c8 1px solid;
padding-left: 20px;
text-decoration: none;
font-size: 15px;
color: gray;
padding-top: 12px;
}
.auto {
border-bottom: #c8c8c8 1px solid;
}
.sidebar-button:hover{
background-color: #f9f9f9;
color: black;
padding-left: 40px;
width: 220px;
}
.bike-picture {
border: #c8c8c8 1px solid;
margin: 40px 46px 46px 26px;
width: auto;
height: 400px;
padding-top: 40px;
text-align: center;
}
<div class="sidebar">
<a class="sidebar-button" href="#">Ноутбуки</a>
<a class="sidebar-button" href="#">Планшеты</a>
<a class="sidebar-button" href="#">Телефоны</a>
<a class="sidebar-button" href="#">Телевизоры</a>
<a class="sidebar-button" href="#">Бытовая техника</a>
<a class="sidebar-button auto" href="#">Автотовары</a>
</div>
<div class="bike-picture">
<img src="img/bike.png" alt="Bike">
</div>
enter image description here
check this one:
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap; /* Safari 6.1+ */
flex-flow: row nowrap;
-webkit-align-items: flex-start; /* Safari 7.0+ */
align-items: flex-start;
padding: 40px 0 46px 0;
background-color: white;
}
.sidebar {
height: 240px;
flex-basis: 240px;
padding: 0 46px 0 46px;
}
.sidebar-button{
display: block;
height: 28px;
width: 240px;
border-top: #c8c8c8 1px solid;
border-right: #c8c8c8 1px solid;
border-left: #c8c8c8 1px solid;
padding-left: 20px;
text-decoration: none;
font-size: 15px;
color: gray;
padding-top: 12px;
}
.auto {
border-bottom: #c8c8c8 1px solid;
}
.sidebar-button:hover{
background-color: #f9f9f9;
color: black;
padding-left: 40px;
width: 220px;
}
.bike-picture {
border: #c8c8c8 1px solid;
flex-grow: 1;
text-align: center;
}
.bike-picture img{
max-width: 100%;
}
<div class="container">
<div class="sidebar">
<a class="sidebar-button" href="#">Ноутбуки</a>
<a class="sidebar-button" href="#">Планшеты</a>
<a class="sidebar-button" href="#">Телефоны</a>
<a class="sidebar-button" href="#">Телевизоры</a>
<a class="sidebar-button" href="#">Бытовая техника</a>
<a class="sidebar-button auto" href="#">Автотовары</a>
</div>
<div class="bike-picture">
<img src="http://s12.postimg.org/fpyql332l/felt_bicycles_q26_194648_1.jpg" alt="Bike">
</div>
</div>
I'm trying to achieve the effect of having a centered image that flows past its containing div's borders, but without using position: absolute, because it hides the header buttons behind it. Is there any clean way to do this without just using old-school absolute position with all the elements (which would be a real pain if I try to do any kind of responsiveness at all)?
Relevant code:
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
#logo {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 150px;
margin-left: -75px;
}
JSFiddle: http://jsfiddle.net/bH35r/
P.S. I'm willing to utilize pretty much anything as long as it does the job cleanly.
You can use display:inline-block;
FIDDLE
HTML :
<div class="section header">
<div class="container no-border">
<a class="header" href="#">About</a>
<a class="header" href="#">News</a>
<a class="header" href="#">Teams</a>
<div class="logo_wrap">
<img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
</div>
<a class="header" href="#">Apparel</a>
<a class="header" href="#">Sponsorship</a>
<a class="header" href="#">Contact</a>
</div>
</div>
CSS :
body {
margin: 0;
font-family: Helvetica;
font-size: 100%;
background-color: #191A18;
}
.section {
margin: 0;
padding: 0;
clear: both;
}
.section.header {
background-image: url('../images/background.png');
background-position: 50% 90%;
border-bottom: 1px solid #A8A8A8;
box-shadow: 0 1rem 1rem #000;
text-align: center;
}
.container {
max-width: 60rem;
margin: 0 auto;
padding: 0 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
.container.logo {
background-image: url('../images/main-image.jpg');
background-position: 50% 20%;
min-height: 20rem;
}
a.header {
color: white;
display:inline-block;
text-decoration: none;
padding: 3rem 1.5rem;
margin: 0 0.5rem;
background-color: rgba(255,255,255,0.1);
}
#logo {
width: 150px;
}
.logo_wrap{
display: inline-block;
height: 5.5rem;
vertical-align:top;
overflow:visible;
}
Use a CSS background image.
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
background-image:url(....);
background-repeat-no-repeat;
background-position: 0px 0px; <--- adjust accordingly.
}
In general, images that are part of the UI (not the content) should be CSS backgrounds, not inline images anyway.