I'm trying to create my very first web site and I'm stuck on the menu buttons (navigation bar). Somehow I managed to create a button finally. Watched a few videos about CSS selectors by ID, by class and attributes, however whenever I try to modify the working code for the first button to apply for the rest of the buttons, it just does not work.. I am trying to use ID instead of Class selections (class works just fine) as I want to change the pictures and sizes of each button and to make all the buttons to be on the same line, which I could not also do by myself.
Here's my code with Class selectors, please advise how to make it with IDs as if I just change the dot with a hash tag, it doesn't work. It doesn't work if I try to re-order the selected parts like a, li etc.
JSFiddle example
#menu {
height: 70px; /* separating the next content from the button */
width: 0px;
text-align: center;
margin: 0, auto;
}
How do I do that and how do I make the menu be on the same line.. tried with float and with style="clear:both" after that for the content after the menu, but it doesn't seem to work.
First, you shouldn't use ids to select that kind of item. Better use ids to identify zones of your website.
But, you can find a working code here: http://jsfiddle.net/cjTN7/24/
#home, #about, #news { background-size: cover; }
#home {
height: 100px;
width: 100px;
}
#about {
height: 200px;
width: 200px;
}
#news {
height: 300px;
width: 300px;
}
For the inline menu, you set your #menu width at 0px. #menu should be 100% (or whatever bigger than your items inside) and set your items in inline-block instead of block.
I don't know if i understood well your issue but, hope it helps.
Good luck :)
Related
I have created a top navigation with these styles below:
div.topnav
{
position: fixed;
width: 100%;
height: 50px;
display: inline-block;
}
And I want to render a object, but that is being displayed behind my top bar, check it out on the image below:
What can I do to fix this?
From the image you provided I believe that what is happening is that your <p> is being rendered behind your topbar
if you add something like:
p {
margin-top: 60px;
}
you should be able to see it!
I'm using 60 because it would be 50 from the topbar height + 10 for a small padding
Top: Current situation, Bottom: What I'm trying to acheive
I am attempting to modify the language switcher at the top of this Wordpress-based website so that both the flags display next to each other, inline, without having to first hover.
https://www.furuhostel.com/
I can't figure it out, so was wondering if anyone could help? Maybe it's not possible with CSS!
Thank you!
Make these changes in your code, change these classes.
#trp-floater-ls.trp-floater-ls-flags {
width: 100px;
display: flex;
justify-content: space-around;
left: 75%;
}
#trp-floater-ls-current-language {
display: none !important;
width: 100%;
height: 100%;
}
#trp-floater-ls-language-list {
display: flex !important;
}
I have inspecting the element within chrome as no code has been supplied for this example but from what I can see you need to:
Remove the currently selected item trp-floater-ls-current-language (I did this by just display:none).
Where the class trp-language-switcher-container is, you will need to remove the defined width of 50px so that the container takes the size of its children.
And lastly you will need to set the class trp-floater-ls-language-list to display: flex.
Hope this helps and is what you are looking for.
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
I was wondering if someone could explain why my navigational sprite isnt showing up next to my links. I have set the url and width so I am unsure what is going wrong:
http://jsfiddle.net/spadez/uZzBW/11/
.nav-sprite {
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 30px;
}
Assuming you want the icons inline with the links, I would suggest something like this:
.nav-sprite {
background: url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 30px;
height: 30px;
display: inline-block;
}
You could also add vertical-align: middle; to better align it with the text.
Spans are not block elements like divs - they are inline elements. So they essentially "collapse". Adding height, width, and display:block will solve it. There are other methods too, but this is pretty straight forward.
width: 30px;
display:block;
height:30px;
added to .nav-sprite exposes the sprite. I will let you position the final pixels/height/width.
see my fork http://jsfiddle.net/Hs8m5/