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.
Related
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
I'm trying to do a tab header, its a list of the titles, sometimes the titles are too long and has "-" in between. So to save space I add br to breakline.
1/The problem is the distance up & down between the "-" symbols is too big, is there any way I can fix that?
is this a correct way to do it by set br tag or should I set max-width for each li for the breakline?
This is my codepen
<div>
<ul>
<li>Real Estate, <br> Building House</li>
<li>Distribution <br>–<br> Manufacturing</li>
<li>Media <br>–<br> Broadway theater</li>
<li>Singer <br>–<br> dancer</li>
<li>Real Estate</li>
<li>Construction</li>
</ul>
div {width: 80%; margin: 0 auto;}
ul {
list-style: none;
/* display: table; */
width: 100%;
padding: 0;
margin: 0;
}
ul li {
position: relative;
font-size: 1.4rem;
/* display: table-cell; */
color: blue;
text-align: center;
display: inline-block;
margin-right: 20px;
}
Hope this helps you:
ul li {
font-size: 1.4rem;
color: red;
max-width: 120px;
padding: 10px;
vertical-align: middle;
text-align: center;
/* padding: 0 5px; */
display: inline-block;
margin-right: 14px;
}
Updated codepen
In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.
I tried vertical-align: middle also played with the line-height but I did not get the desired effect.
What am I missing?
jsFiddle
One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;
Have a fiddle!
#bar has display: table
h4 and #actions are treated as "table cells"
HTML
<div id="bar">
<h4>Tasks</h4>
<span id="actions">
<input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
<input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family:"Arial";
font-size: 62.5%;
}
#actions button {
background: none;
border: 0rem;
}
#actions button input {
outline: none;
}
#bar {
background-color: #4196C2;
display: table;
width: 100%;
}
h4 {
text-decoration: none;
display: table-cell;
vertical-align: middle;
margin-top: 2rem;
/* = 20px */
color: white;
padding: 20px;
font-size: 1.8rem;
}
#actions {
display: table-cell;
vertical-align: middle;
text-align: right;
}
You have not styled the span which contains the two buttons.
Add the following:
#actions {
display: block;
margin: 0 0 0 0;
padding: 15px 0 0 0
}
Here you go: http://jsfiddle.net/csTS7/151/
Add in the div a margin-top and do it with percent for example
#bar
{
margin-top: 5%;
}
Here's the JsFiddle
h4{
text-decoration: none;
display: inline-block;
/* margin-top: 2rem; = 20px */
color: white;
margin-left: 1.5rem;
font-size: 1.8rem;
line-height: 15px;
}
I have given the element bar a minimum height and removed margin top for h4 and added line-height
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?
Here is my relevant code for the #blogtitle element:
#blogtitle{
width: 125px;
height: 150px;
background: #883322;
font-family: Georgia;
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
padding-left: 25px;
margin: 10px;
}
#blogtitle a{
color: #ffffff;
text-decoration: none;
}
#blogtitle a:hover{
text-decoration: underline;
}
...
<div id="blogtitle">
fdsfdj
</div>
When I make a webpage with nothing but the div and a on it, it sticks to the corner, even though I have set margin: 10px.
What am I doing wrong?
change
display: table-cell;
to
display: block;
this will solve the problem.