I am trying to place two separate div in blocks, one is the name and the names.
This is the Fiddle
now the names block must appear as a separate block next to the name div regardless of responsiveness. how to achieve that.
the div should not wrap around one another
try this
.left{
margin: 0px;
padding: 0px;
display:block;
float: left;
width:50%
}
.right{
margin: 0px;
padding:0px;
display: block;
width:50%;
float:right;
}
.arrow{
list-style-type: none;
}
.arrow li:before{
content: '\f0da';
font-family:'FontAwesome','sans-serif';
float: left;
padding-right: 5px;
color: #922B38;
}
<div class="left">
<ul class="arrow">
Name block
<li>Name</li>
<li>Name</li>
<li>Name</li>
<li>Name</li>
</ul>
</div>
<div class="right">
<ul class="arrow">
Names block
<li>Names</li>
<li>Names</li>
<li>Names</li>
<li>Names</li>
</ul>
</div>
You can use float with width to achieve the effect:
.left{
float: left;
width:50%;
}
.right{
float:left;
width:50%;
}
https://jsfiddle.net/oem6r3eL/7/
Related
Each div contains a list of varying lengths and because I'm using inline-block. I think it's causing it to align along the bottom of the div with the most height.
Is there a way I can align these div along the top or will I need to give each div a unique id and style them each accordingly?
I made a fiddle here:
http://jsfiddle.net/Bezzzo/dcqmh2g2/1/
HTML
<!-- footer -->
<div id="footer" >
<!--Community div-->
<div>
<h3>Community</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Tumbler</li>
<li>Google plus</li>
</ul>
</div>
<!--Contact support div-->
<div>
<h3>Contact support</h3>
<ul>
<li>support#supportsupport.com.au</li>
</ul>
</div>
<!--Legal div-->
<div>
<h3>Legal</h3>
<ul>
<li>Terms and conditions</li>
<li>Refund policy</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
CSS
#footer {
position: relative;
width:1033px;
height: 160px;
margin:auto;
border-style:dashed;
}
#footer div {
display:inline-block;
position: relative;
margin-left: 150px;
border-style:dashed;
}
#footer ul {
list-style-type: none;
padding:0px;
margin:0px;
left:0px;
right:0px;
}
Thank you
Just add vertical-align: top; to your #footer div:
#footer div {
border-style: dashed;
display: inline-block;
margin-left: 150px;
position: relative;
vertical-align: top;
}
JsFiddle: http://jsfiddle.net/ghorg12110/dcqmh2g2/3/
As an alternative you can also display: table; — Really useful if you want to make use of vertical align. It may not be best for your current situation but it has it's merits.
#footer {
position: relative;
width:1033px;
height: 160px;
margin:auto;
border-style:dashed;
/* added */
display: table;
/* -- */
}
#footer div {
/* added */
display: table-cell;
vertical-align: top;
/* -- */
position: relative;
border-style:dashed;
}
Working example
Just float left all the div and specify them a width but you need to clear div for this. If you want to use inline block then you don't need to specify width and clear left. In this case you can use vertical-align:top to footer div
JsFiddle : Using float left
JsFiddle : Using inline block
remove display:inline-block from #footer div and use
#footer ul li { display:inline-block;float: left;}
or just
#footer ul li {display:inline-block;}
in your style
I am trying to align the button and links in floated UL list. However it seems they are not getting properly aligned. [Note: we have one link and other is form button].
Following is code and link to codepen:
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
div{
background:yellow;
overflow:hidden;
}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
text-align:center;
}
The reason your li elements aren't getting aligned properly is because of what's inside them.
You have one button and one a-tag. Buttons are by default displayed as a block-element while a-tags are displayed as an inline-element.
This results in your button and your link having different padding because top/bottom padding doesn't show on inline elements.
You can easily solve this by adding display: block; or display: inline-block; to your css rule.
div{
background:yellow;
overflow:hidden;
}
ul:after{content: '.'; visibility:hidden; height:0; display:block; clear:both;}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
display: inline-block;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
use display:inline-block instead of float
the issue was because of float:right by using display:inline-block element adjusts to the width of its children and you can align it by adding text-align
div {
background: yellow;
overflow: hidden;
text-align:right;
}
ul li {
display: inline-block;
list-style: none;
}
a,
button {
padding: 4px;
border: 1px solid green;
margin-left: 5px;
font-size: 12px;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
pls give display:block for a(anchor) tag.if you use padding or margin(etc..) in anchor tag.we need to use display.
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
so I am starting to learn CSS and I can't wrap my head around this.
I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.
Here is a picture for further reference:
I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.
Thanks in advance!
I'm preparing a jsfiddle demo for you, hang on.
It's pretty ugly, but it should give you a starting point on how to tweak it so it works as you wanted. http://jsfiddle.net/T9FXD/
Markup:
<div>
<div class="first"></div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="last"></div>
CSS:
div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}
I'm an hour late to this party, but most of these answers are markup overkill. An unordered list of links has all the styling hooks you need. Basically, padding left on the first li and put in the left image. Padding right on the last li and put in the right image. Main image on the a.
html:
<ul class="example">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
css:
ul.example {
margin:0;
padding:0;
font-size:0; /*this gets rid of the gaps between the items*/
}
ul.example li {
display:inline-block; /*this puts them all in a row*/
margin:0;
}
ul.example li:first-child {
padding-left:10px; /*set this to the width of your left image*/
background-image: url(http://dummyimage.com/10x61/f00/fff);
background-repeat:no-repeat;
}
ul.example li:last-child {
padding-right: 10px; /*set this to the width of your right image*/
background-image: url(http://dummyimage.com/10x61/00f/fff);
background-repeat:no-repeat;
background-position: top right;
}
ul.example li a {
font-size:16px; /*important to set this, as the ul has 0 height text*/
display:block;
height:61px;
line-height:61px;
text-align:center;
width:100px;
background-image: url(http://dummyimage.com/1x61/0f0/fff);
}
http://jsfiddle.net/EKacC/
HTML:
<div class="wrapper">
<div class="firstImage">
<!-- no content, simply assign a background-image -->
</div>
<div class="headerContent">
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<!-- as many as items as you have -->
</div>
<div class="lastImage">
<!-- no content, simply assign a background-image -->
</div>
</div>
CSS:
.firstImage {
float: left;
background-color: red;
width: 50px;
height: 150px;
}
.lastImage {
background-color: blue;
float: left;
min-width: 50px;
height: 150px;
}
.headerElement {
float: left;
background-color: yellow;
width: 50px;
height: 150px;
border: 1px solid black;
}
Not the most elegant solution, but should do it for the beginning. There are - of course - more elaborate solutions... but I think this might work as well for you at the moment.
EDIT
Here is the above markup and css as a working example. I've put borders around the inner (yellow) cells for better visibility.
Stick with using <div> elements for this. Even though tables handle it well, it's more depreciated as they load slower.
It's literally as you depicted the image, with 3 main boxes.
HTML:
<div class="element1"></div>
<div class="element2">
<ul>
<li>Home</li>
<li>About</li>
<li>Forum</li>
<li>Content</li>
</ul>
</div>
<div class="element3"></div>
CSS:
When you have empty div elements, be sure to set dimensions within CSS so that it can show the image you'd like to display.
.element1, .element2 {
width:10px; height:100px;
}
For the image itself.
background:url('...') no-repeat;
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}