I have the issue where I cant adjust the distance between an image and a text.
CSS:
.medarbetare-img {
width: 180px;
height: 100px;
margin-bottom: -25px;
margin-top: 28px;
}
CODE:
<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>
</div>
<div class="right">
<br>
<p style="font-size:12px;">RM
<br>Konstruktör, VD,delägare
<br> <a style="font-size:12px;" href="mailto:#byggprojektoren.se">#byggprojektoren.se</a>
<br>0762 - 62 23 567</p>
</div>
<p style="text-align:justify; font-size:12px; padding:10px 0;">Utbildad civilingenjör inom konstruktionsteknik. Under min studietid har jag arbetat som arbetsledare under tre somrar samt jobbat inom VDC på entreprenadföretaget NCC </p>
I tried adjusting the margin-bottom: -25px- but nothing happends, only on the mobile site. Does anyone have an idea why distance wont get smaller?
URL: http://byggprojektoren.se/om-byggprojektoren/
Try giving to the .left class the margin-bottom attribute.
.left {
margin-bottom: -28px;
}
Because the div with the class: medarbatare-img is in another div with the class of left.
Related
Hey I am confused since I am trying to center a paragraph for instance it wont do anything i tried text-align, align center, inline block and so on.
HTML `
<div class="col-md-6 col-sm-12 picText1">
<p style="background-color:#77b97a;" class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>`
CSS
.picText{
color: black;
border-radius: 20px 20px 20px 20px;
width: 150%;
height: 75px;
padding-top: 2%;
position: relative;
text-align: center;
left: 26%;
}
I also tried using bootstrap command with no luck hope someone can clarify since it works sometimes with text align and so on, but i have put borders around it seems like it wont do anything
You won't need the positioning styles to get the paragraph centered. You can simply specify the width of the element, and then set its margins to 0 auto which will give it 0 margin for top and bottom, and will automatically use the correct left and right margins to make the element centered given its box model and the width of its parent container.
.container {
width: 100%;
}
.picText {
background-color: #77b97a;
border-radius: 20px 20px 20px 20px;
padding: 2%;
text-align: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<p class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>
Using bootstrap, I used a container and centered it using justify-content-center which is simpler than writing css rules in my opinion. You could add your image inside the container and they both will be centered.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container col-md-6 justify-content-center w-50">
<p class="bg-info rounded-lg p-2 mt-3">
Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.
</p>
</div>
I would like to ask how to "lock" background img regardless of amount of text on page. I have 2 background imgs (1 in left, 1 in right). Over that is text article. On every page is different amount of text and imgs aren´t on same spot. If add height: 100% to .pozadi imgs locks out and are on the same spot on every page but in this case text overflows its parent element(.pozadi).
I am aware that giving webpage as example isn´t the best way because probably won´t be there unfix forever but I think that eg. I made below isn´t good enough.
http://matmasar.wz.cz/kompresory/kompresory.html I am talking about the helix in background. If you open page "prodej kompresorů" or "opravy kompresorů" you will probably understand my problem more.
The sroubovice is a attribute of body so I made a wrap div for example.
#primary_nav_wrap {
float: left;
width: 22%;
margin: 0;
z-index: 1;
}
#sroubovice {
background-image: url(http://matmasar.wz.cz/fotky/pozadi.png), url(http://matmasar.wz.cz/fotky/pozadi.png);
background-position: left, right;
background-repeat: no-repeat;
height: 100%;
}
.tlacitka {
color: white;
background: #000;
padding: 10px 20px 10px 20px;
}
.pozadi {
background: #e7f1f5;
float: right;
width: 76%;
}
<div id="sroubovice">
<img src="../fotky/zahlavi3.jpg" id="zahlavi">
<article>
<section>
<h1>Prodej kompresorů</h1>
<div id="wrap">
<nav id="primary_nav_wrap">
<ul>
<a href="../index.html">
<li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li>
</a>
<a href="kompresory.html">
<li class="tlacitka">Kompresory</li>
</a>
<a href="opravy.html">
<li class="tlacitka">Opravy kompresorů</li>
</a>
<a href="../kontakt.html">
<li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li>
</a>
</ul>
</nav>
<div class="pozadi">
<br> Pokud Vám dosluhuje Vaše stávající kompresorová stanice nebo projektujete zcela novou instalaci stlačeného vzduchu, můžeme Vám nabídnout řešení s použitím velmi kvalitních kompresorů a dalšího příslušenství pro úpravu stlačeného vzduchu
firem Gardner Denver a CompAir.
<a href="gardnerdenver.html">
<img src="../fotky/gardnerdenver.png" alt="Gardner Denver logo" title="Gardner Denver logo" class="logo"></a>
<img src="../fotky/CompAir.png" alt="CompAir logo" title="CompAir logo" class="logo" style="margin-bottom: 50px;">
<ul style="font-weight: bold;">
<li>Napište si o cenovou nabídku</li>
<li>Společně zkonzultujeme Váš projekt a navrhneme ideální řešení.</li>
<li>Neváhejte nás kontaktovat</li>
</ul>
</div>
<!-- Konec div class pozadi -->
</div>
<!-- Konec div id wrap -->
Try this:
#sroubovice {
background-position: center top;
}
I found out the solution.
I removed .pozadi from body and replaced article with div as a first child element of body. So it looks like this
<body>
<div id="sroubovice">
<section>
....
</section>
</div>
</body>
Then added height 100% and background-position: left top(or 140px for more exact result), right 140px to .pozadi
#sroubovice{
background-image: url(../fotky/pozadi.png), url(../fotky/pozadi.png);
background-position: left 140px, right 140px;
background-repeat: no-repeat;
height: 100%;
}
I have a CSS hover problem - hover isnt working. Can you please check out the code ant tell me whats wrong?
<div class = "prof_line1">
<div class = "prof_image" id = "kristaps_pic">
<img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img>
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
</div>
<div class = "prof_image" id = "alise_pic">
<img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img>
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>
<div class = "prof_info" id = "kristaps_info">
<p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p>
<p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p>
<p><b>Apbalvojumi un godalgas:</b></p>
<p> hudge text box
</div>
Here is style and really dont understand why this is not working
.prof_info {
font-size:15px;
border:3px solid black;
width:914px;
margin-top:30px;
margin-left:50%;
transform:translate(-50%);
-webkit-transform:translate(-50%);
display:none;
z-index:1;
}
#kristaps_pic p:hover+#kristaps_info {
display:block;
}
The thing is... the + selector, selects the very below element after the p element. That´s why it´s not working. If you try something like this will work for sure:
#kristaps_pic:hover + #kristaps_info {
display:block;
}
Or if you want to hook the #kristaps_info just if hovering the p you have to alter a bit your markup to the following:
<div class = "prof_line1">
<div class = "prof_image" id = "kristaps_pic">
<img src = "http://pokkers.lv/slakters/hhimages/krissprof.jpg"></img>
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
<div class = "prof_image" id = "alise_pic">
<img src = "http://pokkers.lv/slakters/hhimages/alise.jpg"></img>
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>
</div>
CSS worked otherwise.
.prof_info {
font-size: 15px;
border: 3px solid black;
width: 914px;
margin-top: 30px;
margin-left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
display: none;
z-index: 1;
}
#kristaps_info {
display: none;
}
#kristaps_pic p:hover+#kristaps_info {
display: block;
}
<div class="prof_line1">
<div class="prof_image" id="kristaps_pic">
<img src="http://pokkers.lv/slakters/hhimages/krissprof.jpg">
<p>Kristaps Slakters - Zvejsalnieks, Frizieris/stilists/kreatīvais direktors</p>
<div class="prof_info" id="kristaps_info">
<p>Kristaps Slakters Zvejsalnieks Pasaules līmenī godalgots frizieris/ stilists/dizaineris kuram savu imidžu uztic Latvijas, Krievijas un Īrijas slavenības un mākslinieki. Daudz ceļojis un vācis pieredzi dažādās valstīs.</p>
<p><b>Studējis:</b> Rīgas Stila un Modes profesionālajā vidusskolā Baltijas Krievu Institūtā – vides dizainu. Colomer Akadēmijā Dubinā ieguvis Color Specialist Degree, 6 mēnešus pavadījis apmācībā „Tony and Guy” Akadēmijā, 2007- 2009 apguvis Barber
profesiju „Hackett's Barber Academy”, 2011 ieguvis „American Crew” Creative Barber diplomu.</p>
<p><b>Apbalvojumi un godalgas:</b></p>
<p> hudge text box
</div>
</div>
<div class="prof_image" id="alise_pic">
<img src="http://pokkers.lv/slakters/hhimages/alise.jpg">
<p>Alise Zvejsalniece Slaktere, House of Hair menedžeris</p>
</div>
</div>
I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.
This is kind of hard to explain but I'm trying to place a text next to another text. A picture is worth a thousand words so here's what I'm trying to achieve.
Here's a picture of what it should look like
http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg
And this what I have so far. As you can see, the text that I want to place next to this text is not where it should be. I'm talking about the bold text that should be on right "9.1, Date, Author".
JSFiddle
http://jsfiddle.net/NmUaX/20/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;">
<p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p>
<p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
<p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
that content <p> Element you need to give width:500px; float:left
and the bold text 9.1 you need to give a line-height:50px
Check this fiddle http://jsfiddle.net/NmUaX/21/
I tried replacing your HTML (and some CSS) on the right-floating element:
<div style="float:right;">
<div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
<b>9.1</b>
</div>
<div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
<b>Date: </b>2 June 2012
<br/><b>Author: </b> John Smith
</div>
</div>
if you want to float an element to the right top, it would be best to place it before the article content. Also, it would be best to wrap both elements (the 9.1 and the date) into one container before floating them to the right.