First of all I'm new and I need a little help to fix this basic HTML code ,
the code is :
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left { width: 5px; float: left;
border-right: 8px solid #444 }
#right { margin-left: 500px;
border-left: 8px solid #0b9cef }
/*]]>*/
</style>
</head>
<body>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Variety of Payment Methods</big>
</p>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
</html>
I want to 2nd column in the same position as the 1st column is in.
+
I want some space between the blue separator / divider & 2nd column
Can anyone help me to fix this or Can anyone teach me how to do this ?
as I said I'm new so looking forward for some guidance !
First of all you are not using the styling rule #left that has float:left anywhwere. So no floating is happening to the p elements.
Then you are wrapping your second column with a <div id="right"> and the #right styling ruke has no float in it. Thats why the <p> elements are displaying as blocks and not aligning next to each other. Maybe wrap the first column with <div id="left"> and use the following for your #left css rule :
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px // added some padding distance between the content and right border
}
Second point, for
I want some space between the blue separator / divider & 2nd column
you can use padding (refer to this article to see the difference between padding and margin : Margin vs Padding.
Here's your updated code to provide what you need (note that I added 25px padding ditance beween the blue border and the content, and 25px distance between the left colulmn and the right one.)
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px
}
#right {
border-left: 8px solid #0b9cef;
float: left;
padding-left: 25px;
margin-left: 25px;
}
/*]]>*/
</style>
</head>
<body>
<div id="left">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Variety of Payment Methods</big>
</p>
</div>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
To adjust that blue line on the left you will need to add padding to the left ( I made it 10px but you can adjust it)
And set the width of the left to look good for you.
Here is the code
<body>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
width: 300px;
float: left;
border-right: 8px solid #444 }
#right {
margin-left: 500px;
border-left: 8px solid #0b9cef;
padding-left: 10px;
}
/*]]>*/
</style>
<div id="left">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Variety of Payment Methods</big>
</p>
</div>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
Related
so i have a table and i want the buttons side by side instead of stacked
Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/
i tried
display: flex;
align-items: center;
justify-content: center;
but that just does this
ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website
#charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
#media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}
<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>
In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line.
Solution: Remove <br> tags after button elements.
A div box around the buttons with display: flex; and flex-direction: row; Should work
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I have a screenshot as shown below which I am trying to replicate in html/css:
At this moment, I am able to get everything in fiddle with green and orange arrows not properly aligned.
The CSS codes which I have used in order align arrows and desktop in a straight line are:
.tvs
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that I am able to align green and orange arrows in a straight line in between the desktops.
You can wrap them in one div element and use text-align: center on that div.
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.arrows-element {
text-align: center;
}
<div class="tvs">
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-left.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-right.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
</div>
I need to edit these icon kind of menu.
I need them centered on the page, and also look good on mobile.
Here is my sample code:
<div style="margin-left: 0 auto;">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
and here is the fiddle: https://jsfiddle.net/yjwo2eqa/
Can someone help me?
Thanks
Giving text-align: center; to the top most div fixes it:
<div style="margin-left: 0 auto; text-align: center;">
Preview
Fiddle: https://jsfiddle.net/h3ckLfx1/
<div style="text-align:center">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
margin-left is not required just add text-align:center
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags