I was wondering if someone could help me out with this (probably easy) issue that I am having.
What I am trying to do is place my logo on the left side of my site but have it above the two divs which contain the social media links in the top one and the website menu (aligned to the right) in the other div. I have supplied an image of what I am trying to achieve here: http://i59.tinypic.com/155j7tt.jpg (The blue image is the shape of the logo and how I want it too look above the divs)
I am using the getskeleton framework in case that helps at all.
Currently the code for the top two divs is the following:
<div class="bars social">
<div class="container">
<div class="sixteen columns right">
<img src="_img/social/facebook.png" alt="Facebook"> <img src="_img/social/twitter.png" alt="Twitter"> <img src="_img/social/youtube.png" alt="Youtube">
</div>
</div>
</div>
<div class="container">
<div class="sixteen columns right">
<ul>
<li>Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
Now my question is where/how do I place my code so that the logo can float above those two divs (and also hang a little below them as seen in the pic).
Everything I do either places it on top of one or the other but not both.
UPDATE:
The CSS for the full screen version is as follows:
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .sixteen.columns { width: 940px; }
.bars {backgound-color:#FFF;}
.right {text-align:right;}
.bars.social {background-color:#101116; color:#FFF; height:29px; padding-top:4px; border-bottom:2px solid #063;}
Here is a way to add a logo using absolute positioning to push it up and on top of the social media links. Of course, substitute with your own logo.
http://jsfiddle.net/bzoc9vbj/
#logo {
width:64px;
height:64px;
position: absolute;
top:0;
left:0;
background-image:url('https://asciinema.org/assets/bitcoin-logo-48563026498d25219c7e2ec2b978184b.png');
}
Related
I am trying to add icons to my menu items. I have read many different tutorials on it, but the css that all tutorials recommend will not work for me, and I'm not sure what to do.
Here is my html and css:
<div class="hike-menu">
<ul>
<li class="icon">Menu Item 1</li>
<li class="icon">Menu Item 2</li>
<li class="icon">Menu Item 3</li>
<li class="icon">Menu Item 4</li>
</ul>
</div>
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-repeat: no-repeat;
background-position: top;
}
And I have also uploaded in onto a jfiddle if you would like to take a look. You can see the exact problem I am having with the icon not showing. https://jsfiddle.net/katherinekonn/g1e4cok3/5/
I should also note that it is absolutely necessary I use background-image for this, I am unable to place an img link directly into the html. Does anyone know how I can fix it? I would like the icon to be above the list items text.
Here is an image of what I am trying to create:
The main issue is related to the size of the icon you used. The actual size is much bigger than you required. So either you resize the image or apply background image size in css. Then apply some padding-top for the <LI> to avoid overlapping of text and icon.
I tried modifying your css in fiddle and it worked perfect for me. please see it below
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-size: 20px;
background-repeat: no-repeat;
background-position: top;
padding-top: 30px;
}
Please try this. It will work.
HTML
<div class="hike-menu">
<ul>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 1
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
<li class="element">
<div class="icon">
</div>
<div class="text">
Menu Item 2
</div>
</li>
</ul>
</div>
CSS
ul li {
list-style-type: none;
display: inline-block;
}
.icon {
background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
}
.text {
display: block;
}
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
I apologize in advance if this has been asked before but unfortunately I can't seem to find an answer - maybe I used the wrong terms while searching.
However. I am building a very simple website to display my portfolio and I decided to put a fixed sidebar on the left and the main contents scrolling on the right. Let's say the "active part" of the website begins where the sidebar ends, and I need my contents centered between the end of the sidebar and the end of the browser window.
I float the contents to the right and manage to make it look like I want it to but only by setting specific margins.
As you can see the result viewed on my laptop, which is correct on this resolution, but if the size of the window increases, the contents remain, obviously, on the right, and the left margin becomes bigger than the right margin which I don't want.
Is it possible to make the main setting itself at the center so that the two margins are even on different resolutions?
HTML
<div id="main">
<div class="title-contents">
<h1 class="page-name">Stuff I Make</h1>
<div class="gallery-icon"><img src="images/grid-icon.jpg"/></div>
<div class="gallery-icon"><img src="images/line-icon.jpg"/></div>
<div style="clear:both"></div>
</div>
CSS
#main {
background-color:#fff;
width:780px;
height:100%;
margin:60px;
float:right;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
}
Thanks to everyone of you who will read and eventually answer and please forgive my clear lack of knowledge, I started doing this a couple of weeks ago so if this question is beyond stupid just try to understand, ahah ;) Thank you!
Veronica
EDIT: fiddle...I hope it's clear. As you can see the main sticks to the right because I set it to float:right, but if I set it to float:center it stays in the middle of the page goind UNDER the sidebar. I want it to always stay centered WITHIN the space next to the sidebar.
To answer the question, the sidebar has a fixed width. Thanks!!!! :)
When using a percentage layout, I suggest you to use TJ's answer.
If you want the sidebar to have a fixed width, I made you this solution, using absolute position on the main part:
HTML:
<div id="sidebar">
sidebar
</div>
<div id="main">
<div>
content
</div>
</div>
CSS:
#sidebar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
background: lightblue;
}
#main {
position: absolute;
top: 25px;
right: 25px;
bottom: 25px;
left: 175px; /* width of #sidebar + extra margin */
}
#main > div {
width: 100%;
min-height: 100%;
background: lightgreen;
}
What it does: the sidebar has a fixed place and a fix width. If you want you can add margin to it by playing around with the top, left and bottom position.
The #main div is placed absolute. The top, right and bottom position are all set to the same number (in the example 25px). The left position is the width of the sidebar plus the extra margin (in the example 150 + 25 = 175px;
Also see this demo.
Footnote: the extra div inside #main is for when the length of the content is bigger than #main, and the background will expand. See this extra demo. In case it all fits inside it, just remove the div (and put a background on #main).
You need a container for the sidebar and content. You can fixed position the sidebar and center align the content in the remaining space by applying padding-left equal to the width of sidebar and margin:0 auto for the container.
Following is a quick responsive setup:
HTML
<div id="page">
<div id="sidebar"></div>
<div id="main"></div>
</div>
CSS:
#page{
height:100%;
padding-left:10%; // equal to the width of sidebar
}
#sidebar{
position:fixed;
top:10%;
left:0;
width:10%;
height:80%;
}
#main {
width: 80%;
height: 100%;
margin:0 auto; // center align horizontally
}
Try resizing the output window in following fiddle:
Demo
Not sure what you are looking for but maybe this?
HTML
<div class="one">
Here's room for the side menu
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
<li>option 6</li>
<li>option 7</li>
<li>option 8</li>
<li>option 9</li>
</ul>
</div>
<div class="two">
<div id="main">
<div class="title-contents">
<h1 class="page-name">Stuff I Make</h1>
<div style="clear:both"></div>
</div>
</div>
</div>
CSS
#main {
border: 2px solid red;
width:80%;
height:100%;
margin: 0 auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:60px;
box-sizing: border-box;
}
.one {
border: 2px solid green;
float: left;
width: 20%;
display: block;
box-sizing: border-box;
height: 100%;
}
.two {
border: 2px solid blue;
float: left;
width: 80%;
display: block;
box-sizing: border-box;
}
Here's a Fiddle
I have some HTML, and I am trying to figure out a way to make my logo, nav menu and social media icons one a single line.
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<ul class="nav">
<li class="menuitem">Home</li>
<li class="menuitem">Blog</li>
<li class="menuitem">Test</li>
<li class="menuitem">Contact</li>
</ul>
<div class="social-media">
<img src="facebook.jpg">
<img src="twitter.jpg">
<img src="pinterest">
</div>
</div>
I want to logo to the left, nav menu in the middle, and the social media icon to the right.
I just realized that I forgot to post my CSS:
div .h1 {
float: left;
}
li {
display: inline-block;
}
ul {
float: left;
}
.nav {
float: left;
}
The easiest way to achieve this is text-align: justify:
Take a look at this Fiddle
Another good Tutorial for this effect is found on Codrops.
I am trying to make a div that contains other floating divs to adjust its width such that adding more floating divs (dynamically using jQuery) will only expand the div in its width, not allowing the floating divs to create a new line. Therefore, I want to fix this issue such that each div with class grid-row only expands in width, and so I will be able to scroll using the overflow: scroll for the parent grid div. I have searched a lot for answers, and it seems that it is a famous issue. However, non of the answer solved my problem.
I am currently doing this:
<div id="grid_container">
<div id="grid">
<div class="grid_row">
<div class="module" id="experience">
Experience
</div>
<div class="header">
Google
</div>
<div class="header">
Microsoft
</div>
</div>
<div class="grid_row">
</div>
</div>
</div>
CSS:
body {
}
#grid_container {
margin: 50px auto;
width: 500px;
height: 500px;
padding: 10px;
border: black solid 1px;
}
#grid {
overflow:scroll;
height: 100%;
}
.grid_row {
clear: both;
height: 50px;
}
.module, .header{
padding: 10px;
float: left;
border: gray solid 1px;
}
You can achieve this by making the row container float and have the style "white-space: nowrap;"
http://jsfiddle.net/UeNZr/3/
EDIT
An alternative is to make each item display inline and make each grid element float. http://jsfiddle.net/UeNZr/5/.
If you're making a list, consider using the more semantic ul.
Demo
HTML:
<ul class="grid">
<li>
<ul>
<li>One Mississippi</li>
<li>Two Mississippi</li>
<li>Three Mississippi</li>
<li>Four Mississippi</li>
<li>Five Mississippi</li>
<li>Six Mississippi</li>
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
</ul>
CSS:
.grid ul{
margin:10px 0;
height:42px;
width:100%;
overflow-x:scroll;
background:white;
white-space:nowrap;
}
.grid li li {
list-style-type:none;
display:inline-block;
padding:10px;
border:1px solid gray;
height:20px;
}