I'm trying to edit a website and put the logo in the same line as the navigation bar. The problem is, my logo hides behind the bar. I've tried using float, but with no results. The position of both is good, I just don't know how to make the logo display on top of the navigation bar.
.logo {
display: inline-block;
vertical-align: top;
width: 200px;
height: 50px;
float: left;
margin-left: 80px;
.navigation-bar > a {
float: right;
position: relative;
Thank you for any help!
Try This code for CSS & HTML
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<div class="header">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Cryptic Concepts" hight="10px" width="200px"/>
<div class="header-right">
Home
News
<a class="active">About</a>
</div>
</div>
this is an example with the Google logo, I got the code from W3 Schools
it looks like this
Related
I have been having trouble centering the .content div in any device. In some devices, the .content is exactly centered but not in others. I use padding-top to push the .content down so it could be placed on the center of any device. What should I do to center the .content in any device using padding-top? Should I use Javascript in this kind of situation?
body {
margin: 0;
}
.whole {
height: 100vh;
background: #d44949;
}
header:after {
content: '';
display: table;
clear: both;
}
.logo {
font: 1.4em 'Open Sans',sans-serif;
color: #fcfcfc;
text-transform: uppercase;
float: left;
margin-left: 15px;
}
.logo > span {
font-style: italic;
color: #d8d8d8;
}
.header-nav {
float: right;
margin: 20px 15px 0 0;
}
.header-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em 'Open Sans',sans-serif;
font-weight: 300;
}
.header-nav > a:not(:first-child) {
margin-left: 15px;
}
.header-nav > a:hover {
color: yellow;
}
.content {
display: flex;
flex-direction: column;
padding-top: calc(100vh / 2);
}
.content > img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: auto;
}
.content-nav {
margin: auto;
padding-top: 20px;
}
.content-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em 'Open Sans',sans-serif;
font-weight: 300;
}
.content-nav > a:not(:first-child) {
margin-left: 10px;
}
<div class="whole">
<header>
<h1 class="logo">Max<span>&</span>Spoon</h1>
<div class="header-nav">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>
As you are already using flex you could remove the padding-top and add align-items: center; to your .content.
So your CSS for .content becomes:
.content {
display: flex;
flex-direction: column;
align-items: center;
}
Here's the updated snippet.
body {
margin: 0;
}
.whole {
height: 100vh;
background: #d44949;
}
header:after {
content: '';
display: table;
clear: both;
}
.logo {
font: 1.4em'Open Sans', sans-serif;
color: #fcfcfc;
text-transform: uppercase;
float: left;
margin-left: 15px;
}
.logo > span {
font-style: italic;
color: #d8d8d8;
}
.header-nav {
float: right;
margin: 20px 15px 0 0;
}
.header-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em'Open Sans', sans-serif;
font-weight: 300;
}
.header-nav > a:not(:first-child) {
margin-left: 15px;
}
.header-nav > a:hover {
color: yellow;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.content > img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: auto;
}
.content-nav {
margin: auto;
padding-top: 20px;
}
.content-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em'Open Sans', sans-serif;
font-weight: 300;
}
.content-nav > a:not(:first-child) {
margin-left: 10px;
}
<div class="whole">
<header>
<h1 class="logo">Max<span>&</span>Spoon</h1>
<div class="header-nav">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>
I have this page: food menu
I have placed a clear on the dish title with the following css:
#media (max-width: 768px) {
.dish: {text-align:center;}
.dishTitle {
clear: right;
display: block;
}
.dish img {clear: left;}
}
For some reason it is not clearing. If you inspect the dishTitle div it shows up and if I remove the display attribute it does clear. How can I get the images and price to be centered on a separate line below the dishNumber and dishTitle divs? Also, I have the entire dish item wrapped in the .dish div and have set it to text-align: center; but nothing is centering. I want it to look right on mobile devices and right now it just bunches everything together. Here is all of my CSS if it helps:
.dish {
text-align: left;
}
.dishNumber {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #FF6600;
margin-right: 2px;
}
.dishTitle {
font-size: 18px;
display: inline;
line-height: 24px;
vertical-align: middle;
color: #000066;
margin-bottom: 4px;
}
.dishPhoto {
padding-right: 8px;
padding-left: 8px;
display: inline;
}
.dishPrice {
font-size: 18px;
clear: right;
display: inline;
float: right;
line-height: 32px;
vertical-align: middle;
color: #000066;
}
.dishDescription {
font-size: 14px;
margin-bottom: 6px;
font-style: italic;
padding-right: 44px;
}
.dish img {
max-height: 22px;
}
Thanks for any help.
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>
I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position.
So when I scroll up or down the box stays at the same height.
But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;
Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.
Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.
My code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.ico">
<style>
html,
body {
background-color: #026642;
}
#container {
width: 800px;
margin: 20px auto;
position: relative;
}
#sidebox {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
width: 180px;
position: absolute;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position: absolute;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebox">
Sidebox
</div>
<div id="indexcontainer">
<div id="header">
<img src="images/emte.jpg" alt="logo" width="200" height="100">
</a>
</div>
<div id='content'>
Main text box
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How it needs to work:
use this CSS...
body {
background-color: #026642;
}
#container {
width: 100%;
}
#container #indexcontainer{
margin-left:23%;
width:30%;
}
#container #indexcontainer #header #sidebox {
background-color: white;
color:red;
padding: 5px;
margin-left:31%;
border-radius: 5px;
width: 20%;
position: fixed;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position:relative;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/
Hope this help you... thanks
<html>
<head>
<script type="text/css">
#sidebox{
margin:left;
position:fixed;
}
</script>
</head>
<body>
<div id="sidebox">
Sidebox
</div>
<p>
other data to display......
</p>
</body>
Hope this will helps
also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;
}
#container {
width: 100%;
margin: 20px auto;
position: relative;
}
opera mini / mobile behaves strange on menu links links, they are not visible (actually, as the site renders they become visible for a second, and then they are not visible anymore, but the text is selectable.). On other browsers, everything is fine. Anyone knows the reason for that?
(i tried with media queries disabled, same thing)
html code
<div id="navbox">
<nav>
<ul>
<li>Usluge</li>
<li>Cvijeće</li>
<li>Galerija</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
css code
#navbox {
width: 620px;
float: left;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
#navbox nav {
width: 620px;
float: left;
margin-top: 66px;
}
#navbox li {
width: 68px;
float: right;
list-style: none;
margin-left: 24px;
background: rgb(230,230,230);
}
#navbox a {
display: block;
padding: 134px 0px 0px 0px;
border: 0px solid rgb(195,195,195);
color: rgb(171,74,119);
text-decoration: none;
text-align: center;
}
Try this in your CSS:
#navbox nav {
width: 620px;
float: left;
margin-top: 66px;
}
#navbox li {
float: right;
list-style: none;
margin-left: 24px;
background: rgb(230,230,230);
}
#navbox a {
display: block;
padding: 15px 20px; //adjust to your liking
border: 0px solid rgb(195,195,195);
color: rgb(171,74,119);
text-decoration: none;
text-align: center;
}
#media screen and (max-width:767px){
#navbox nav {
width:100%;
}
}
If it doesn't work out for you, can you post a link to your page so we can take a look?