I have problem with responsive design. I try to display text over the box in image, but when I resize browser text is outside the box.
My picture:
.row6 {
background: none;
width: 100%;
height: 130px;
border: 0px salmon dotted;
font: bold 1.7vw arial, sans-serif;
margin: 20px auto;
}
.row6 > div {
position: relative;
top: 8px;
width: 100%;
height: 100%;
margin: 0 auto;
background: url(images/background.png) no-repeat;
background-size: 100%
}
#dd7 {
margin-left:44.7%;
width:45px;
text-align:center;
padding-top:0.7%
}
HTML code:
<div class="row6">
<div>
<div>
<div id="dd7">TEXT</div>
</div>
</div>
</div>
What I should do to have text always in right place over image?
Try this fiddle
.row6 {
background: none;
width: 100%;
height: 130px;
border: 0px salmon dotted;
font: bold 1.7vw arial, sans-serif;
margin: 20px auto;
}
.row6 > .bgImage {
width: 100%;
height: 100%;
margin: 0 auto;
background: url(http://i.stack.imgur.com/amwBH.png) no-repeat;
background-size: 100%
}
#dd7 {
margin-left:44.7%;
margin-top: 1.2%;
float: left;
}
The problem is you're using a fixed width (45px) for your text. Try using a percentage width instead:
#dd7{
...
width: 5%;
}
https://jsfiddle.net/pnzLn2no/1/
Related
How do I center my .peachtext and my .whitetext paragraph tags text within the .headertext1 div? Please help! I'm pretty new to coding. I'd also like to increase the .peachtext size to 30px and the .whitetext to about 20px but it produces a space between the words an and extremely. It seems like my text-align property is not working.
header{
width: 100%;
height: 1229px;
}
div.headerblue{
width: 100%;
height: 505px;
background-color: #323841;
}
div.headerwhite{
width: 100%;
height: 594px;
background-color: #ffffff;
}
div.headerorange{
width: 100%;
height: 130px;
background-color: #f25c43;
}
div.headertext1 {
width: 940px;
margin: auto;
padding-top: 30px;
}
p.peachtext {
color: #f25c43;
font-size: 20px;
text-align: center;
}
p.whitetext {
color:white;
font-size: 10px;
text-align: center;
}
<header>
<div class="headerblue">
<div class="headertext1">
<p class="peachtext">WE PROVIDE AN EXTREMELY</p>
<p class="whitetext">LOW PRICE</p>
</div>
</div>
<div class="headerwhite"></div>
<div class="headerorange"></div>
</header>
if you want to center your .peachtext and, .whitetext inside your div.headertext1
you should set the width of your
.headertext1 from 940px to 100%
div.headertext1 {
width: 100%; //set this to 100%
margin: auto;
padding-top: 30px;
}
or you change the width to max-width if you want to keep 940px
div.headertext1 {
max-width: 940px; //set this to max-width
margin: auto;
padding-top: 30px;
}
and if you want to adjust the font size of your text you may use "VW" instead of "PX"
like this
p.peachtext {
color: #f25c43;
font-size: 4vw;
text-align: center;
}
p.whitetext {
color:white;
font-size: 2vw;
text-align: center;
}
Ran snippet on Firefox and the placements are exactly like you want them to be, both paragraphs nicely in the center of the div. Just increase your font-sizes to get the sizes you want. You sure your css file is correctly linked ?
header{
width: 100%;
height: 1229px;
}
div.headerblue{
width: 100%;
height: 505px;
background-color: #323841;
}
div.headerwhite{
width: 100%;
height: 594px;
background-color: #ffffff;
}
div.headerorange{
width: 100%;
height: 130px;
background-color: #f25c43;
}
div.headertext1 {
width: 100%;
margin: auto;
padding-top: 30px;
}
p.peachtext {
color: #f25c43;
font-size: 30px;
text-align: center;
}
p.whitetext {
color:white;
font-size: 20px;
text-align: center;
}
<header>
<div class="headerblue">
<div class="headertext1">
<p class="peachtext">WE PROVIDE AN EXTREMELY</p>
<p class="whitetext">LOW PRICE</p>
</div>
</div>
<div class="headerwhite"></div>
<div class="headerorange"></div>
</header>
Check the above code.
I want the text to shrink as the image shrinks. e.g. maintain the same ratio in size relative to the image. I've tried making the text disappear but it simply isn't what I want.
The CSS:
.header{
padding: 0.16px 16px;
position: relative;
box-sizing: inherit;
display: block;
font-size: 15px;
line-height: 1.5;
text-size-adjust: 100%;
content: "";
display: table;
clear: both;
font-family: "Montserrat", sans-serif;
}
.top-left{
padding: 24px 48px;
margin-left: 16%;
position: absolute;
left: 0px;
top: 0px;
box-sizing: inherit;
display:block;
font-size: 15px;
line-height: 22.5px;
text-size-adjust:100%;
}
.header-image{
vertical-align:middle;
border-style: none;
box-sizing: border-box;
width:65%;
height:auto;
margin:30px 250px;
}
#media screen and (max-width: 600px) {
.header-image {
margin-left: auto;
margin-right: auto;
display: block;
width:65%;
}
}
.new-arrivals{
position: absolute;
display:block;
left: 0;
top: 0;
margin:10px 5px 10px 0;
font-size: 4vw !important;
color:black;
padding: 50px 100px;
font-weight: 400;
line-height: 60px;
}
.shop-now{
border:none;
display:inline-block;
padding:12px 24px;
margin: 260px 50px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:white;
background-color:black;
text-align:center;
white-space: nowrap;
font-size: 18px
}
.shop-now:hover{
background-color: #ccc;
color: black;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.designs{
position: absolute;
left: 0;
top: 0;
font-size: 20px !important;
font-family: "Montserrat", sans-serif;
margin: 150px 0;
color:black;
padding: 24px 100px;
font-weight: 400;
}
The HTML:
<div class="header">
<img class="header-image" src="img/jeans.jpg" alt="Jeans">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<p><h3 class="designs">Our new season collection is here</h3> </p>
<p>SHOP NOW</p>
</div>
</div>
If you want the text to be responsive as the image, you need to set h1 element style in your CSS file. For example:
.new-arrivals {
font-size:clamp(2em, 4vw, 4em); /* set min, ideal value, max */
}
I was trying to do the same thing for my portfolio. And I end up putting my text imbedded inside the image by using the ms paints. The text inside image can't be responsive if it's not of part of image. I hope that help.
You can accomplish this by setting both the width of the image and the font-size based on the width of the screen. Below is an example of that.
This question is similar, and the answers there may be helpful to you as well.
body {
margin: 0;
}
.container {
position: relative;
color: white;
width: fit-content;
}
.top-left {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 3vw;
}
img {
width: 100vw;
}
<div class="container">
<img src="https://html.com/wp-content/uploads/flamingo.jpg">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<h3 class="designs">Our new season collection is here</h3>
<p>SHOP NOW</p>
</div>
</div>
If you don't need the image to scale with the screen width, you can simply set a fixed pixel size for both the image and the text.
CSS for the Text:
.text {
font-size: 15vw;
}
CSS for the Image
img {
width: 10vw;
max-width: /* Set this to 10-15cm if you want to show you page on
mobiles too */
min-width: /* Set this to 8-10cm if you want to show you page on
mobiles too */
}
try these and adjust
font-size: clamp(1rem, 3vw, 2rem)
font-size: max(1rem, 3vw)
font-size: calc(200% + 2vw)
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I am trying to align a horizontal rule with the white line in my menu. And I want that alignment to stay when viewed on different screens. What's my best option for doing that? Image of what it needs to look like:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
float: right;
width: 51%;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display: block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right
}
#resume_btn:hover {
background-position: 0 -68px;
}
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
<div id="head"></div>
</div>
You can achieve this by modifying slightly the CSS and HTML code, and using translation to move the menu items to the center of the screen.
To do this you need to:
Wrap everything in div with the border-bottom (e.g.: #head)
Float the page title (h1) to the left (although maybe it would be better to change its position to absolute or it may affect the menu links)
Wrap all the navigation elements in a div (e.g.: #menu) with absolute position positioned in the center of the #head (left:50%)
Transform the #menu div to translate it 50% of its width to the left. This could be achieved by adding this to its style:
transform:translate(-50%, 0%)
You can see a demo working here: http://jsfiddle.net/o4ff4thc/ or below:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: inline-block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display:inline-block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#resume_btn:hover {
background-position: 0 -68px;
}
#menu {
position:absolute;
left:50%;
transform:translate(-50%,0%);
height:20px;
width:245px;
}
<div id="head">
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
</div>
</div>
I have a two column layout which has stopped working while tweaking to get rid of the double scroll bars on body. Now I have one scroll bar on wrap which is what I wanted but the contents somehow overlap by the width of the scroll bar.
html, body {
margin:0;
padding:0;
font: 12px Geneva, Verdana, sans-serif;
color: #1e1f21;
vertical-align: top;
height: 100%
}
body {
background: #fff url(../esimages/cubes.png) no-repeat left bottom fixed;
}
#wrap {
background: #f5f5f5;
margin: 0 auto;
width: 960px;
height: 100%;
}
#logo {
height: 75px;
width: 100%;
background: #1e1f21;
padding: 10px 0px 5px 0px;
}
#header {
height: 30px;
width: 100%;
background: #1e1f21;
margin:0px;
padding: 0px;
}
#container {
overflow: hidden;
height: auto;
background: #f5f5f5;
width: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#content1 {
min-height: 100%;
background: #f5f5f5;
padding: 20px 20px 20px 40px;
margin: 0
}
#content2 {
float: right;
width: 290px;
min-height: 100%;
background: #f5f5f5;
padding: 20px 0px 20px 10px;
margin: 0
}
#footer {
clear: both;
padding: 10px;
background: #1e1f21;
text-align: center;
line-height: 200%;
font-size: 10px;
}
The two content boxes don't fit in the container side by side as they should. I have tried with different reduced fixed widths for content1 but it makes no difference at all and the column width stays the same no matter what. I am tearing my hair out because it's just not logical!
<body>
<div id="wrap">
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="content2">
<div class="box0">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="content1">
<p></p>
</div>
</div>
<div id="footer" align="center"></div>
You need to put a width and float: left on content1. Also keep in mind that the total width + padding cannot exceed the container's width.
Also, you're missing a semicolon after margin: 0 for content1