I have 3 lists I want to position side by side in html5. What is the best way to do this. I have tried using float and text align in css it just wont work for me. I have been looking at the W3schools tutorials and have looked on here but can't find anything related to lists. I can post the code if needed.
http://pastebin.com/gC6KGaFL Here is the code for the webpage its an assignment for college.
Here is the css http://pastebin.com/xrm8QqeS
It is better to put your list in div and position them (divs) inline-block.
Here is the JS fiddle, If I am right.
enter code herehttp://jsfiddle.net/dhustlerz/cpp6n4sa/
Related
I am trying to make my nav bar sit parallel with my logo but I'm having difficulty doing this.
First of all, when I enter the code for the image, the image afterwards doesn't display at the top of the page.
Instead, it sits about 40px below the page. I have tried using floats, but have had no luck.
I have created a negative value of -20px for the logo to sit further at the top of the page but would like to know if that is normal practice in CSS
I have tried looking at youtube videos but the code they share doesn't seem to work on my project. I'm just wondering whether the image may be a bit too big for the header
I would definitely recommend using Flexbox. It takes the hard work of setting floats and setting things in a manual way out of your way. Here is a cheat sheet and a little background into using Flexbox. It's also responsive too.
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
if want to easily make a navbar you can go to the website listed below and you can pick which one of the navbars you want then alter or change it based on what you like it has all styles of navbar with logo without a logo or even the style you want.
link to navbar code:
https://www.w3schools.com/css/css_navbar.asp
I'm trying to divide the body of my webpage into different text parts, i.e. rectangles that would be separated and kinda float on the background. A good example would be a following website: http://www.index.hr/.
How can I achieve this?
Thanks in advance!
Stack Overflow is not a code making service, and writing the code from scratch is not encouraged. Have you done any research as to how you would approach this problem? I will not give out the entire code, but I will tell you to research <div> HTML elements and CSS position, float and clear properties.
I have a question about how to organize my div elements.
I have drawn a picture, where you can see a phone and four texts. Here is what I want: http://i61.tinypic.com/14spc2c.jpg
But when I'm trying to code it, I end up with this: http://i57.tinypic.com/2i0cgzk.png
I have searched all over the web, but I can't find any solution. I'm awere of using "margin" but with any resolution that do not fit mine, it will look weird.
Can anyone help me? :)
Encapsulate the texts in divs and then use float css property.
This is essentially what I'm trying to do:
I have an image I want to use as the background for the webpage, and I want to put content over it, while keeping everything responsive so it's always centered!. I'm using Foundation 4, which is making things tricky (but I want to learn how to do it this way). The black boxes will be images, and the idea behind this is that everything can remain responsive.
The black boxes are supposed to be centered. I've tried using absolute positioning for the boxes and forgoing trying to put them in a , but it doesn't seem to work too well (i could be doing something wrong).
Overlapping anything in Foundation 4 seems tough. I must be going about it wrong somehow. Thanks for your time!
I'd need to check your HTML code structure to confirm but I think what you want is .small-centered and .large-centered (they work the same as .small-1,.large-1 but for centering).
http://foundation.zurb.com/docs/components/grid.html (Search for Centered Columns on page).
Also for the boxes I hope you are using Foundation's Block-Grid for your boxes - it will make your boxing a lot easier to do.
http://foundation.zurb.com/docs/components/block-grid.html
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.