I'm designing my website, and I have a problem with the positioning a box, in CSS. When you see it from the desktop it looks good, but at the moment of the phone it is not totally responsive, nor centered. I do not understand what is wrong with my code.
HTML
<div class="cuadrado">
<div class="franja">
<h1>Mario</h1>
<h4>Web Developer</h4>
</div>
CSS
.cuadrado {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background-attachment: fixed;
background-color: #f7f7f7;
height: 500px;
width: 462px;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px none #000000;
}
.foto {
position: relative;
left: 190px;
top: -125px;
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
background-size: 100% auto;
}
.franja {
position: relative;
top: 62px;
height: 150px;
width: 100%;
background-color: #EFF2F2;
}
Here you can see it online: https://mariomuratori.github.io/contact
Thanks for the help!
The reason it doesn't look as good on your phone is because you're using static pixels, and the resolution on your phone is not the same as your monitor.
You can try checking out a tutorial like this for help to make it responsive on both devices:
https://www.w3schools.com/html/html_responsive.asp
Related
I'm trying to recreate the following image in CSS:
I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
Any idea? Thanks.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
<span class="speech-bubble"></span>
You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 70px;
height: 30px;
background-color: #ff0d1e;
transform: skew(55deg);
transform-origin: top right;
border-radius: 15% 0 0 0 / 25%;
z-index: -1;
}
<span class="speech-bubble"></span>
It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.
Here I used border-top-left-radius and border-bottom-left-radius.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
border-top-left-radius:80%;
border-bottom-left-radius:200%;
}
<span class="speech-bubble"></span>
I have a problem that's driving me insane, and it has done so for quite some time. I've spent days trying to figure this one out with no success. Google is basically purple to me now. Additionally I fear the answer might be embarrassingly easy - but I'm about to go drown myself so here goes:
The problem:
I use pure css modal windows on my site. They are set to be absolutely positioned using margin: 0 auto; and translateY(-50%); like so:
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
I am using named anchors to hide/show the modal windows.
This works beautifully in basically every browser - I get the modal windows to appear and disappear like they are supposed to, in the center of the VIEWPORT of my browser window. In Safari and on iPhones and iPads however, it seems my modal windows get absolutely centered relative to the ENTIRE PAGE/DOCUMENT.
So, if my page has a vertical scrollbar, clicking the anchor link and showing the modal window makes the BROWSER WINDOW jump as well - in order to display the modal window in the absolute center of the entire page.
I include my modal windows just before the closing body tag like so:
<?php
include 'layout/elements/modal/users_online.php';
include 'layout/elements/modal/requests.php';
include 'layout/elements/modal/notifications.php';
include 'layout/elements/modal/messages.php';
include 'layout/elements/copyright.php';
include 'layout/elements/modal/developer.php';
?>
</body>
</html>
This is the code of my modal windows:
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 50%;
left: 0;
color: #333333;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
So thanks to weBer (seriously thank you so much :D) I was able to figure out the answer.
This works:
.modal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
position: fixed;
display: block;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 785px;
max-width: 785px;
min-height: 515px;
max-height: 515px;
margin: 0px auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
Am not sure this is your answer but here it goes.
Am taking .modal as your pop up overlay background. So change its code to -
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #333333;
}
And .modal .big_container- which is our content box should have the following style.
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
display:inline-block;
position:absolute;
left:50%;
top:50%;
-webkit-transform: translateY(-50%,-50%);
-ms-transform: translateY(-50%,-50%);
transform: translateY(-50%,);
padding: 20px;
box-sizing:border-box;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
Check if it works for. I think this might, I use this in my most of the projects.
I want to insert an image in CSS bubble, the code is correct but nothing appears,
can you please check how to solve this one
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*border-radius: 10px;*/
background: linear-gradient(top, #f9d835, #f3961c);
}
now before
.triangle-isosceles:before {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
the last one is after
.triangle-isosceles:after{
content: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
background: #3365d4;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
In the "after" version, you have two errors:
content: This is not the correct tag to specify the background, the correct one would be simply "background"
background: As you may figure by reading the first error, the background property you have defined is the one who is specifiying the background. This tag has to be removed as it will be overwritten if is not deleted.
So the CSS should loke like this:
.triangle-isosceles:after {
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
You should also consider to add compatibility with more browsers. You can find more information at this page: https://www.w3schools.com/cssref/css3_pr_background-size.asp
EDIT: This is an example of a working CSS tag that add a background image to a "div":
#headerwrap {
background: url(../images/homepage/header.jpg) no-repeat center top;
margin-top: 60px;
padding-top: 20px;
text-align: center;
background-attachment: relative;
background-position: center center;
min-height: 600px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope this helps :)
You need to add content also, Without content after and before won't work
Like this :
.triangle-isosceles:after {
content :'';
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
Does anyone in here knows how to make a div go to the center of the page (vertically) no matter the screen resolution or window size of the user? As an example, the login page of Instagram. If you make your window smaller, the div will keep floating at the center until it gets to the top. I made that, but the problem was that when the user kept making the window smaller, the div was actually going out of the user window (to the top).
Here is the Instagram login page for the example:
https://instagram.com/accounts/login/
And here is my page for the other example:
http://www.farespr.com
Would appreciate an answer =)
EDIT: This is my main div code:
#wrapper2{
width: 960px;
height: 530px;
top: 50%;
margin-top: -280px;
margin-right: auto;
margin-left: auto;
position: fixed;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dcdcdc;
box-shadow: 0px 0px 5px 3px #f0f0f0;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
background: -moz-linear-gradient(top, #fafafa, #efefef);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef');
}
This will work for any size div.
demo: http://jsfiddle.net/BxLhz/
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: #cc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
UPDATE:
demo: http://jsfiddle.net/Ha4PU/
CSS:
#wrapper {
width: 200px;
height: 200px;
background-color: #ccc333;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#media only screen and (max-height : 200px) {
#wrapper {
position: relative;
}
}
where max-height = height of .wrapper
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
In today's news, the official twitter widget (http://twitter.com/about/resources/widgets) destroyed my footer completely. And I don't know why, since that script doesn't have access to my style.css
or does it?
I have tried to rearrange and ever redo the footer, and still the nice white space that the twitter widget created still persists. WTF is happening? Of all the tweaking I've done, the only thing that seems to work is deleting the entire footer. fantastic solution!
Can anybody help me?
footer.php:
</div> <!-- End of pagewrap -->
<footer class="group">
<div id="logo"></div>
<div id="twittertitle"><h3>The Director's Production Diary #iampineros</h3> </div>
<div id="twitterbox"><div id="winfo"></div></div>
<div id="sociallist">
<ul>
<li><div id="facebooklogo"><h3>Facebook</h3></div></li>
<li><div id="twitterlogo"><h3>Twitter</h3></div></li>
<li><div id="flickrlogo"><h3>Flickr</h3></div></li>
<li><div id="vimeologo"><h3>Vimeo</h3></div></li>
<li><div id="youtubelogo"><h3>Youtube</h3></div></li>
</ul>
</div>
<div id="disclaimer">All material published in this website is property of Filmliga unless stated otherwise. Please, don’t mess with us, thank you. Copyright 2011 FIlmliga/Benjamin Piñeros. All rights reserved. This site is powored by Wordpress.</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
style.css:
#page-wrap { width:1020px; margin: 0px 0px 0px 0px; padding: 0px 0px 20px 0px; background: white; }
footer { width: 1020px; height: 300px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }
#logo { width: 221px; height: 222px;position:relative; bottom: -20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat; }
#twittertitle { position:relative; bottom: 208px; left: 270px; padding: 0px 0px 0px 0px; }
#twitterbox { position:relative; top: -203px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }
#winfo { position:relative; top: 0px; left: 0px; padding: 0px 0px 0px 0px; background:none; width: 500px; height: 180px; }
#sociallist { position:relative; bottom: 393px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }
#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }
#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }
#sociallist li h3:hover {color: #1ad4ff; }
#facebooklogo { background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 10px; left: 103px; }
#facebooklogo h3 { position:relative; bottom: 3px; right: 90px; }
#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position:relative; top: 20px; left: 98px; }
#twitterlogo h3 { position:relative; bottom: 3px; right: 85px; }
#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position:relative; top: 30px; left: 103px; }
#flickrlogo h3 { position:relative; bottom: 2px; right: 90px; }
#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position:relative; top: 40px; left: 101px; }
#vimeologo h3 { position:relative; bottom: 2px; right: 87px; }
#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position:relative; top: 50px; left: 104px; }
#youtubelogo h3 { position:relative; bottom: 2px; right: 90px; }
#disclaimer { position: relative; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }
The problem is that you're positioning things in a pretty strange way inside your footer... you're specifying lots of top, left, and bottom values on elements that have position: relative—these elements are still causing things to lay out as if they are in the normal flow of the document (which accounts for the huge bottom gap you see), and then they're also shifted by your positioning values.
A much more common (and easier) approach is to give your footer (or .group) position:relative and then apply position: absolute to the children—that way the children will be absolutely positioned relative to the parent.
The problem lies is your layout. Your extensive use of absolute/relative positioning is messing up subsequent div placements. Consider redoing your layout.
Here's a quick fix though:
Apply to #disclaimer:
margin-top: -330px;