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.
Related
I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: https://imgur.com/s5EzL6n
What i want to achieve is to make all that grey background 100% width.
I followed this youtube video: https://www.youtube.com/watch?v=lYw-FE60Dws
I probably set some things wrong, i am sure, but i am a beginner.
HTML:
<header>
<div class="container">
<div id="branding">
<img src="logo.png">
<a class="toggle">Meniu</a>
</div>
<nav>
<ul class="active">
<li class="current">Acasă</li>
<li>Despre</li>
<li>Servicii</li>
<li>Proiecte</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
CSS:
/* responsive header*/
.toggle{
display: none;
position: absolute;
right: 10px;
top: 26px;
padding: 5px;
cursor: pointer;
text-decoration: none;
}
#media (max-width: 940px){
.toggle{
display: block;
}
header .toggle{
padding: 0 0;
font-size: 18px;
}
header ul li{
display: block;
width: 100%;
background-color: grey;
}
header ul.active{
display: block;
}
header ul li a{
display: block;
text-align: center;
}
header nav{
margin: 0;
width: 100%;
}
header ul li{
width: 100%;
}
}
/*normal page*/
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0px 20px;
}
header #branding{
float: left;
height: 90px;
margin-left: 35px;
}
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
there is a default padding for ul, you have to remove it when you don't need it. Just add 0px to the ul and you will have a 100% div
Try to use css box models to solve such cases
https://www.youtube.com/watch?v=xF0dhepbzD8
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
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.
Very new to HTML and CSS
- I can't seem to get these navigation buttons to stack in a vertical column, for say a mobile layout. Thought display:block would do the trick but its not. I don't think my html is picking up any of my .btn attributes.
![Buttons won't stack vertically][1]
.nav {
display: block;
width: 100%;
height: 100%;
text-align: center;
list-style-type:none;
font-weight: bold;
font-size: 70%;
color: #FFFFFF;
background-color: #2b5429;
font-family: 'Lato', helvetica, sans-serif;
vertical-align: middle;
position: sticky;
line-height: 40px;
}
.btn {
display: inline-block;
width: 100%;
height: 100%;
padding: 0px;
background-color: #2b5429;
color: #ffffff;
font-family: 'Lato', helvetica, sans-serif;
vertical-align: middle;
position: sticky;
text-align: center;
line-height: 40px;
}
<nav class="btn nav">
<button>Home</button>
<button>Activities</button>
<button>About</button>
<button>Animal Facts</button>
</nav>
a is inline by default and if you want it to be block-level then define it:
.nav a{
display: block;
}
Try using html lists for your navigation.
ul {list-style: none; margin: 0; padding: 0;}
<ul>
<li>Home</li>
<li>Activities</li>
<li>About</li>
<li>Animal Facts</li>
</ul>
http://jsfiddle.net/wzrx9ea1/
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