This question already has answers here:
CSS Float: Floating an image to the left of the text
(7 answers)
Closed 3 years ago.
I am trying to align my logo next to the h1, but the logo always goes above it. I'm a beginner to html and css. I tried all other answers in Stack Overflow.
Here’s my code:
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"> <h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
You have not added the class (css) float left.
I have added css here is the code
HTML
<div class="cust-container">
<img src="img/gostack.png" id="yourlogo" alt="The only logo" class='iconDetails'>
<h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
CSS
.cust-container {
width:100%;
height:auto;
padding:1%;
}
.iconDetails {
margin-left:2%;
float:left;
height:40px;
width:40px;
}
h1 {
margin:0px;
}
Here is the link https://jsfiddle.net/Arpit09/fwxjvy1d/4/
In HTML, block elements expand to fill all available horizontal space, forcing all other elements to flow either above or below the responsible element. To fix this, you can either change the display properties of your elements or use something like CSS Grid or Flex. I recommend just adding display: flex to your .logo class
.logo{
display: flex;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"><h1 class="text-light" ><span><strong>GoStack</strong></span></h1>
</div>
You can add a class "inline" in your h1 and add this CSS property to it:
.inline {
display: inline;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo">
<h1 class="text-light inline" ><span><strong>GoStack</strong></span></h1>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I want the span to start from top and as text length increases fill more lines but it starts from bottom to top.
![ image for the problem] : https://ibb.co/KXFtC2g
<div style="width:70%;margin-left: 15%">
<section name="about">
<h2>عن الكورال</h2>
<article >
<div style="height: 100%;">
<span>
hey.
Well this is a vety professional discription of our team.
feel free to check these xyz.
</span>
</div>
</article>
<figure >
<img src="assets/team.jpg" >
</figure>
</section>
</div>
article {
display:inline-block;
width:40%;
}
figure{
display:inline-block;
width:40%;
}
This should achieve what you're looking for.
figure{
display:inline-block;
width:40%;
float: right
}
See a fiddle here
I need to make a logo in my footer responsive, and it should be centered. I thought I could solve it the following way with bootstrap:
HTML
<!-- Footer -->
<div class="container-fluid">
<div class="row">
<div class="landing img-responsive footer">
<div>
<img src="~/img/logo-white-small.png" />
</div>
</div>
</div>
</div>
CSS
.landing.img-responsive.footer {
margin: 0 auto;
}
But is that incorrect?
I would suggest you to use
<center><img src="~/img/logo-white-small.png" /></center>
or alternatively
<div style="text-align:center" class="img-responsive">
<img src="~/img/logo-white-small.png" />
</div>
Also check the space between .landing .img-responsive .footer between these classes in you css.
You can use:
img {
display: table;
margin: auto;
}
To center the image, while adding the .img-responsive class part of bootstrap to make it responsive.
https://jsfiddle.net/c79bstuu/
User img-responsive class for responsive image.
Use center-block class to horizontallyalign an element center.
<img src="~/img/logo-white-small.png" class="img-responsive center-block" />
it will make your image responsive as well as horizontally center aligned.
anyhow if you want vertically align then you should use display: table-cell for child div and display:table for parent div. You also need to remove float property from child div.
Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect - blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle
So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don't expand within its borders? And the effect of the blur doesn't touch neighboring elements?
Remove class row and col-lg-12,use col-sm-12 like
<div class="col-sm-12">
<div id="work1" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
<p class="text">ONE</p>
</div>
<div id="work2" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
<p class="text">TWO</p>
</div>
<div id="work3" class="col-sm-4">
<img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
<p class="text">THREE</p>
</div>
</div>
CSS:
works img {
height: 600px;
width: 100%;}
Apply this css, you'll get the look like the example --
.works img{
display:block;
max-width:100%;
}
.works [class^="col-"] {
padding-left:0;
padding-right:0;
}
.works .text{
position:absolute !important;
left: 0;
right: 0;
}
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each
At the moment, what I have is seen in the first picture. I would like to know how can I add the spaces (bottom margin?) between the images as shown in picture 2? They 2 side-by-side blocks are 2 different DIVs, and the pictures in each line are elements of the same div, so bottom-margin doesn't work. (CODE AT THE BOTTOM)
Picture 1:
Picture 2:
HTML:
...
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
<div class="rightbar">
<div class="rightpic2">
<img src="pic3.png"> <br>
<img src="pic4.png"> <br>
<img src="pic4.png"> <br>
<img src="pic5.png"> <br>
<img src="pic3.png">
</div>
</div>
<div class="rightpic1">
<img src="pic1.jpg"> <br>
<img src="pic2.jpg">
</div>
...
CSS:
.rightpic1{
float:right;
margin-right:30px;
margin-top:100px;
}
.rightpic2{
margin-right:24px;
margin-left:24px;
margin-top:38px;
}
.rightbar{
float:right;
background-color:white;
margin-top:62px;
}
<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.
.rightpic1 a, .rightpic2 a {
display: block;
margin-top: 15px
}
First of all, you need to close all your image tags. Then add display:block; to the links inside your .rightpick1 & .rightpick2 classes. Then, you can successfully add a margin-bottom to your links.
I attached a fiddle as an example. Hope that helps!