When I list a set of links, they go left to right on my web page. I want them to be stacked instead, so going from top to bottom. What do I need to add to do that?
Here is my HTML:
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
Index Page
Schedule Page
To Top
</div>
Add this style to the links it will take the full width vertically.
style="display :block;"
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
Index Page
<a href="pagetwo.html" style="display:block" >Schedule Page</a>
<a href="pagethree.html" style="display:block" >To Top</a>
</div>
The quick way;
#Links {
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: block;
}
<div id="Links">
Index Page
Schedule Page
To Top
</div>
The semantically correct way;
#Links {
list-style-type: none;
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: list-item;
}
<nav id="Links">
Index Page
Schedule Page
To Top
</nav>
Cheers!
The a tag belongs to the inline elements. With the css rule display:block you can let them behave like block elements.
#Links a {
display: block;
}
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
Index Page
Schedule Page
To Top
</div>
Related
I've been trying to create a responsive navbar with just two images (which are hyperlinks and transparent) and I can't seem to get the formatting right. The way I want it to look is:
First image: width:60%
Second image: width: 40%
Both have the same height
Border: 2px solid black (around both images)
Padding: 10px (Around both images and between the two)
Keep the navbar on the top of the page
Hover effect that changes the background color
Basic Idea
The closest I've come is this code:
HTML:
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
CSS:
<style>
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color: #black ;
}
a{
display: block;
}
</style>
The main problem I'm having is that I cannot figure out where to implement the padding so that it will separate the two images and surround them.
First you need to clean up you HTML code into valid HTML so that your CSS selectors are able to apply styles to the elements in the DOM. Remove the backslashes from your HMTL code to give you this;
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
Add a -4px left-margin to the images to counter the space used by the borders (this prevents the second image from going to next line since they occupy 60% + 40% of the entire page width, yet right + left borders of images take up 4px).
Also add display:block; property to the "#outerdiv" selector and change the value of the display property for the "a" selector to inline.
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
see working snippet
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
enter image description here
html:
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
css:
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
I want all 4buttons to be aligning at bottom. But I cant understand how? I have seen other question but as I am using 4 buttons because of position:absolute and float:right all overlap on each other. How can I solve this?
The following should give you the result you're looking for. (you'll still need to add any responsive behavior the banner might need (as it will break at smaller screen sizes)
/* for IE9- render these elements correctly */
header,
nav {
display: block;
}
/* header container */
.head {
background-color: #555f00;
border: 2px dashed #ddd;
max-width: 1366px;
min-height: 100px;
min-width: 230px;
position: relative;
overflow: hidden;
}
.head__img-area {
float: right;
}
.propic {
width: 100px;
height: 100px;
}
.head__nav-area {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
}
.head__nav-area .btn {
display: inline-block;
/* dummy styling */
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .3);
padding: 8px;
color: #fff;
text-decoration: none;
}
.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
background: rgba(160, 160, 160, .5);
border-color: rgba(40, 40, 40, .9);
}
<header id="header" class="head">
<div class="head__img-area">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />
<map name="image">
<area shape="circle"
coords="50,50,50"
href="opendiary.html"
alt="insert descriptive text here" />
</map>
</div>
<nav class="head__nav-area">
<a href="profile.html" class="menubar btn a1">
Profile
</a>
<a href="opendiary.html" class="menubar btn a2">
Open Diary
</a>
<a href="message.html" class="menubar btn a3">
Message
</a>
<a href="#" class="menubar btn a4">
Options
</a>
</nav>
</header>
So what the above is doing is floating the new img-area wrapper to the right, as per your screen shot. The entire nav container is then position absoluted and set to the bottom / left of the header.
I cleaned up the link/button combos you had there... it's invalid to have buttons inside of anchor elements, so I put the classes of the buttons on to the <a>s and made up some dummy styling to display them.
While I used position absolute and floating to achieve this layout, I primarily used them because they were utilized in the code you provided. Since you're using an image map, I'm guessing this may be an older project? And based on that assumption, I figured flex box wouldn't be a solution for you due needing at least IE10 for browser support.
However, if you can use flexbox, I'd highly recommend you check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As it could have been used to achieve this layout (and would be easier to work with for responsive websites)
good luck!
Wrap the buttons and their containers in a div a position that div absolute and align it bottom.
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
/**Added this**/
.btn-cont {
position: absolute;
bottom: 0;
/** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
float: right;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<div class="btn-cont"><!--Added this div-->
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
</div>
Surround all your buttons with a div container and give this div container some CSS. This could look at the end like this:
#header {
min-width: 230px;
max-width: 1366px;
min-height: 100px;
position: relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header .buttons {
position: absolute;
left: 0;
bottom: 0;
}
/* To replace the <a> link */
#header .buttons form {
display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
font: bold 13px sans-serif;
text-decoration: none;
background-color: #E0E0E0;
color: black;
padding: 2px 6px 2px 6px;
border: 1px solid #CCC;
border-right-color: #333;
border-bottom-color: #333;
font-weight: normal;
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html"/>
</map>
<div class="buttons">
<a href="profile.html" class="menubar-link">
Profile
</a>
<form action="opendiary.html" method="get">
<button type="submit" class="menubar btn a2">Open Diary</button>
</form>
<form action="message.html" method="get">
<button type="submit" class="menubar btn a3">Message</button>
</form>
<button class="menubar btn a4">Options</button>
</div>
</div>
Float is often considered as bad practise. So try whenever to avoid this option.
Also you should not use <button> tags inside <a> tags. I added two possible ways to avoid this.
This answer helped me: Answer to: How to align content of a div to the bottom?
I have the following code which creates a list containing images.
HTML:
<ul>
<li class="list">
<div class="list_div">
<img class="list_image" align="top" src=""/>
<h3><a>Headline 1</a></h3>
<p>text,text,text,text,text,text</p>
</div>
</li>
<li>
<div class="list_div">
<img class="list_image" align="top" src=""/>
<h3><a>Headline 2</a></h3>
<p>text,text,text,text,text,text.</p>
</div>
</li>
</ul>
CSS:
li {
padding: 2px;
color: #000000;
font-size: 12px;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
border-bottom: 1px solid #AFAFAF;
background-color: #CCD5DF;
}
.list_div {
width: 100%;
display: block;
}
.list_image {
float: left;
width: 30%;
height: auto;
border: 2px solid #000;
left: 0;
top: 0;
}
I want to:
place image in left and headline, text in right side. ==> in first List
place image in center and show headline, text within Image in center ==> in second List
BUT, this style need to follow:
image width 30% in 1st List and 50% in second List.
ul, li in static position.
page is responsive.
here is my code sample, link: http://jsfiddle.net/2ycggga9/
is this what u want to do
http://jsfiddle.net/2ycggga9/5/
.list2 > h3,.list2>p{
position:relative;
left:-23%;
}
<li class="list2">
<img class="list_image" src="http://thekitemap.com/images/feedback-img.jpg"/>
<h3><a>Headline 2</a></h3>
<p>text,text,text,text,text,text.</p>
</li>
First of all, here are some images explaining what exactly I'm trying to do:
How it should be:
This is how it is right now:
This is the markup:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar">
<h5 class="name">John Doe</h5>
<time>2 days ago</time>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
CSS:
.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;
}
img.avatar {
float:left;
padding-left:20px;
padding-right:20px;
}
h5.name {
margin:0;
}
span.date {
font-size:12px;
}
a.like {
float:right;
padding-right:20px;
}
Here's a jsbin example with what I'm trying to do.
Any suggestions on how can I align them as in the screenshot?
Instead of assigning various classes to hyperlinks, nest them in the block element.
I changed your code, and updated the jsbin, is this what you were seeking?
http://jsbin.com/lajugiciyi/1/edit
.info {
border: 1px solid #E6E6E6;
padding: 20px 0
}
.avatar {
float: left;
padding: 0 20px;
}
.name {
display: inline-block
}
.name h5 {
margin: 0;
padding: 3px 0 0;
}
.like {
float: right;
padding: 0 20px;
}
.follow {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
You want the follow/like buttons to be aligned with the name, right?
HTML:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar" />
<div>
<h5 class="name">John Doe</h5>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
<time>2 days ago</time>
</div>
CSS:
h5.name {
margin:0;
display:inline;
}
http://jsfiddle.net/1319Lw2r/1/
Add the following:
a.follow {
margin-left: 10%; /* adjust to your liking */
}
I would recommend using margin instead of padding where you have it in your example, as well.
For example, padding is pushing the text inside the <a> tag which makes the anchor wider than it needs. By using margin instead it pushes the anchor while keeping it's size constrained to the content. You can test this by putting a border around the <a> tag.
I want to remove the border-right for the last child using css. I'm using the html below:
<div class="dividers">
<div class="clone_container">
<img src="clone.png"/>
<a class="button-link">Clone</a>
</div>
<div class="delete">
<img src="delete.png"/>
<a class="button-link">Delete</a>
</div>
<div class="abort">
<img src="abort.png"/>
<a class="button-link">Abort</a>
</div>
<div class="pause">
<img src="pause.png"/>
<a class="button-link">Pause</a>
</div>
</div> //end of dividers div
and the css:
div.dividers a {
display: inline-block;
border-right: 1px solid #DCDCDC;
border-radius: 4px;
height: 22px;
}
div.dividers {
margin-right: -3px;
padding-right: 0px
}
div.dividers a:last-child { border-right: none; }
when i do a { border-right: none; } like shown above, all the borders are removed.
how can i fix this? anyone with any ideas??
The output i am looking for is:
Clone | Delete | Abort | Pause
Try
div.dividers > div:last-child > a { border-right: none; }
Your code div.dividers a:last-child means
Select all <a> such as
Are last child of its parent
Are descendants of a <div> with class dividers.
The code div.dividers > div:last-child > a { border-right: none; } means
Select all <a> such as
Are children of a div <div> which
Is the last child of its parent
Is a child of a <div> with class dividers.
You need to target last div in .dividers div:
div.dividers div:last-child a {
border-right: none;
}
Example