I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.
Can anyone point me in the right directory, it would be greatly appreciated.
https://codepen.io/robot43298/pen/WNGENNL
.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}
Try this,
Remove this margin
.navbar-end .dropdown-trigger {
margin-top: 15%; /* Remove this margin */
display: inline;
vertical-align: bottom;
}
and add some padding here as per your need
.dropdown{
padding-top: 20px;
}
This should do the trick;
I tried looking your code in console, I added one line and removed one.
and it seems to work as per you expectation.
Do let me know if this what you wanted.
Related
I want to move my text to the left-hand side from the centre. text-align or float properties don't work.
I know there is a previous question like this but none of the solutions worked. Can anyone see if I am doing anything wrong here? I am using Brackets and here is my code:
.logo {
color: #0000000
float: left;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
}
Here is the .html
<ul class="gws">
<div class="logo">
LOGO
</div>
Here is how the website currently looks
http://prntscr.com/k14jf5
Here is the full coding
http://prntscr.com/k1b1zl and http://prntscr.com/k1b2gn
try this: To move Left side use
{
float:right;
padding-right:50px;
}
To move Right side
{
float:left;
padding-left:50px;
}
Hex colors contain 6 digits, yours has 7, also do not forget to place a semicolon (;) behind the color and the float: left; See if that works.
There are 2 things that I would suggest:
The float is missing the ending semicolon. It should be like this:
float: left;
What's the width of the unordered list class? Make sure it's sufficient to let your logo to align to the left. If it has a fixed width then make it large.
If you could provide more information then I would be able to help better!
To get the desired result you should give anchor tag to.
.logo {
color: #0000000;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
text-align: left;
}
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
I have just posted my question before for the same topic which is Here. I got a correct answer from Mr. Simon, thanks to him. I found one more issue, the width of the drop down menu is very small and its not coming in one line please Click Here to know the detail. I want the text to come in one line...
Also, he said to use the below code to remove the last splitter in the menu filed. I dont know where to put this. Can you assist me.. Thanks..
$('.green ul.mega-menu li:last-child a').css('background','none');
Try adding this to your CSS:
.mega-menu a { white-space: nowrap; }
For second issue (width of nav items):
Remove the fixed width (and I would change text-align: center to text-align: left) on the following CSS declaration:
.green ul.mega-menu li a {
background: url("images/bg_green.png") repeat-x scroll 100% 0 transparent;
color: #000000;
display: block;
float: left;
padding: 12px 38px 12px 25px;
text-align: center; /* <--- Change this to text-align: left; */
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
width: 102px; /* <--- Remove this */
}
I've been working on this for a while, and just can't seem to figure it out.
I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.
To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.
I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..
Any ideas? Thanks.
It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.
#header {
float: left;
margin-right: 48px;
margin-top: 26px;
/*width: 334px;*/
}
Another way is to add white-space: nowrap to your li.
li {
color: #888888;
list-style-type: none;
white-space: nowrap;
}
Edit:
Try this instead...
.slash {
color: #BBBBBB;
padding: 0 2px 0 19px;
}
.header {
background-color: yellow;
border: 1px solid red;
}