I have this code which causes an styling error on the mobile version:
CSS:
.medarbetare-img {
width: 180px;
height: 100px;
margin-bottom: 5px;
margin-top: 16px;
HTML:
<div class="left">
<div class="medarbetare-img" style="background:
url(http://byggprojektoren.se/wp-content/uploads/2014/09/Rinor2.jpg)
center top no-repeat;">
</div>
<p style="font-size:13px;">Name Name<br>
Konstruktör, VD,delägare<br>
<a style="font-size:13px;"href="mailto:#byggprojektoren.se">#byggprojektoren.se</a>
<br>0762 - 92 23 51
</p>
</div>
<div class="right">
<p style="text-align:justify; font-size:13px; padding:10px 0;">
Text that collides with the picture
</p>
</div>
The following picture being created is:
Related
Dears,
I am making a name card and the codes are below:
I want to align the last two spans "STUDIO ICONIC" and "info#studioiconic.net" on the same line, however it is always appeared that the email span comes after like the picture show. Is possible to basically adjusted something to achieve that? or is there something i do it wrong? If possible i don't want to use grip or flexbox...Thanks.
<!DOCTYPE html>
<html lang="en">
<body style="border: 2px solid green; width: 500px; height: 270px;">
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style="margin-left: 65px; display: inline;">STUDIO ICONIC</span>
<span style="margin-left: 300px; display: inline;">info#studioiconic.net</span>
</div>
</body>
</html>
The best way for layout is flex. About the inline style, it is highly recommended that don't use it. instead, use classes for your styling.
.wrapper{
display:flex;
}
.image-container{
margin-left: 50px;
margin-top: 50px;
width: 150px;
height: 150px;
border:2px solid gainsboro;
}
.image{
width:100%;
}
.right-side{
display:flex;
flex-direction:column;
margin-left:100px;
}
.info{
display:flex;
}
.s1{
padding-left: 65px;
}
.s2{
margin-left:120px;
}
<div class="wrapper">
<div class="image-container">
<img class="image" src = "../smile1.jpg" alt="smile face">
</div>
<section class="right-side">
<p>
<b>ODEN QUEST</b>
<br>
<span><em>Creative Director</em></span>
</p>
<p>
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p>
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
</section>
</div>
<div class="info">
<span class="s1">STUDIO ICONIC</span>
<span class="s2">info#studioiconic.net</span>
</div>
For detection only, in the code that you wrote, you should change display and margin-left of your span.(span by default is display:inline)
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style=" margin-left:65px;">STUDIO ICONIC</span>
<span style="margin-left:110px;">info#studioiconic.net</span>
</div>
I have a bunch of image and text side by side, both are inside a div that is float:right. This is how it looks now. I need to vertically center align the text beside the image (for example Text Answer). How do I do that? Please suggest.
<div id="content">Content here</div>
<div id="navbar">
<br>
<div id ="quesBuilderText">Question Builder</div> <br>
<div id = "textImage"> <img id="textImg"/></div>
<div id = "textText"> Text Answers </div>
<br> <br> <br>
<div id = "multipleChoiceImage"> <img id="multipleChoiceImg"/></div>
<div id = "multipleChoiceText"> Multiple Choice </div>
<br> <br> <br>
<div id = "dropdownImage"> <img id="dropdownImg"/></div>
<div id = "dropdownText"> Dropdown </div>
</div>
</div>
Sample CSS
#navbar {
float: right;
width: 24%;
background-color: white;
}
#textImg {
width:30%;
max-width: 40px;
height:auto;
margin-left: 20px;
float: left;
}
#textText {
margin-left: 10px;
float: left;
color: #7F7F7F;
}
You can do it as follows. The essential part is the CSS rule for #navbar>div , but note that I deleted a lot of the other settings and added a class .textText to all three texts (instead of IDs):
#navbar {
float: right;
width: 30%;
}
.textText {
margin-left: 10px;
}
#quesBuilderText {
margin-bottom: 20px;
font-weight: bold;
}
#navbar>div {
display: inline-block;
vertical-align: middle;
}
<div id="content">Content here</div>
<div id="navbar">
<br>
<div id="quesBuilderText">Question Builder</div> <br>
<div id="textImage"> <img src="http://placehold.it/40x30/fb7" id="textImg" /></div>
<div class="textText"> Text Answers </div>
<br> <br> <br>
<div id="multipleChoiceImage"> <img src="http://placehold.it/40x30/fb7" id="multipleChoiceImg" /></div>
<div class="textText"> Multiple Choice </div>
<br> <br> <br>
<div id="dropdownImage"> <img src="http://placehold.it/40x30/fb7" id="dropdownImg" /></div>
<div class="textText"> Dropdown </div>
</div>
I'm trying to learn responsive CSS but having difficulty with some basic css design. I've created a fixed navbar as you may be able to see in the code below. But the problem i'm facing is that i'm not able to properly align content below it. The content is getting overlapped by the navbar. Can you suggest an appropriate CSS fix and not a workaround like adding empty divs with fixed heights? Here is the code:
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
`responsive.html`
The appropriate way is to add padding-top in your div, the same padding as the height of your fixed header.
I made a few changes to your responsive.css file and it worked out for me.
Here are the changes that I made:
in title-bar class
.title-bar{
position:fixed;
top: 0;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
I changed margin-top:0px; to top: 0;
Why? To Set the top edge of the fixed positioned navbar to 0 below the top edge of its nearest positioned ancestor as told here
and in the display-bar-1
.display-bar-1{
background-color: deepskyblue;
height: 200px;
margin-top: 100px;
padding:40px;
position: relative;
}
I added margin-top: 100px;
Why? Your navbar had a height of 100px. So i gave a margin top of 100px to your display-bar-1 class.
Hope this resolves your issue.
Your navbar has a height of 100px. So you need to start with your divs 100px below.
Add to the first div after the navbar this:
style="top:100px;"
Then it should work. It would look like this:
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
Other ways would be to create an own css class for the first div after the navbar. Then you could also work with
padding-top:100px;
or
margin-top:100px;
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}