Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Sorry for the stupid question, but i don't understand what is the right header width
width: 100%;
padding-left: 32px;
padding-right: 32px;
or
width: 1216px;
max-width: 100%
?
width: 1216px;
means you have an element with the exact width of 1216px as seen the in picture
width: 100%;
means that the element width now equals to the width of the container element minus margin and padding if specified.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have an image like this
I want to put small clickable boxes on it, like this
Does anybody have any idea how to do this using HTML/CSS?
Edit: Thanks to #BCollingwood, his answer with boxes property as absolute worked like a charm.
You can add all images to a container div then position them relative to each other using CSS:
HTML
<div class="container">
<img class="image_1" /> // the background
<img class="image_2" /> // the clickable square
</div>
CSS
.container {
position: relative;
}
.image_2 {
position: absolute;
left: 50px;
top: 50px;
}
you have to use svg. it is not wise to use anything other than svg to make certain part of image clickable.
[https://www.w3schools.com/graphics/svg_intro.asp]
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'd like to create a static home page (hence, no scrolls) that will take all the width and height available on the screen. Like this https://getuikit.com/ or http://underco.fr/
Basically I've tried to set height: 100% to both htmland bodybut as I have a navigation bar, it creates a scroller.
How could I do that?
There are several ways to achive this. I recomend you setting paddings and margins to 0 and using vh for height
or you can do this to:
body {
position: absolute;
margin: 0px;
overflow: hidden;
top: 0px;
bottom: 0px;
width: 100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to create the headline section on www.dzn-studios.com full height, only when on desktop.
Though when I try and adjust the height: with a '%' value there is no effect. If I enter a pixel value that does change the height but ruins the responsiveness.
Desired outcome
Apologies for the newbie question but we all have to start somewhere right!
You would add this declarations to your css rule for header.section-headline.homepage
.section-headline.homepage {
height: 100vh;
margin-top: -80px;
}
If I've understood your question correctly percentages aren't working.If this is the case you may need to set a 100% height on all your parent elements, in this case your body and html.
example:
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; }
if this isn't what you're asking please be more clear and i'll edit my answer
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This site: http://www.samuelgrant.co.uk
This is exactly the kind of setup I want to build. I'm stuck, however, at figuring out how the maximum width of this site is being set. I want a centered main content area like this site has with the background stretching to full browser width. Can anyone enlighten me? Relative newbie here...any help would be appreciated. Thanks!
HTML
<div class="container">
<div class="inner-w">
Stuff in your inner column
</div>
</div>
CSS
body {
margin: 0;
}
.container {
background-color: #f06;
}
.container .inner-w {
max-width: 50em; /* or 400px etc */
margin-right: auto;
margin-left: auto;
}
a jsFiddle that also shows this column width - and how it can be different in each sections etc.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
margin: 0px auto; is not working with width: 100%; any one know the answer for this
Eg: .abc{
margin: 0 auto 0px;
width: 100%;
<div class="abc">
<input class="acc" type="radio" name="a">
<label>hi.</label>
<input class="cc" type="radio" name="a">
<label>No</label>
</div>
100% width does not leave any space for margin.
margin:0 auto will work only on width less than 100%.
Write
{text-align:center}
to center content inside element.
Demo here.
Because you are setting something as a full width you cannot centre it. The best option would be to set your width as either fixed width for example 'width:600px;' and then use 'margin:0px auto;' the other way would be to use a percentage width for example 'width:70%' and then also use 'margin:0px auto' this would mean that the styled element would grow or shrink to the screen size. With this option you can set the maximum size and the minimum size as well
use "text-align:center;" from the outer div
hope this helps