I've been working a lot with responsive webdesign lately, and I've come across a bit of an issue. I have a one-page based website, where I currently have 2 sections (pages) first one is the intro, and second one is "about me". Now, I had a couple of my friends to visit my website on their computers (1 being a laptop, which screen height is very low compared to my 24 BenQ) I want to ask how I can make my content static, so the intro doesn't sort of disappear underneith the "about me" section.
.intro-container
{
width: 70%;
letter-spacing: .2em;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#ContentWrap-2-about
{
width: 100%;
height: 50%;
background-color: rgb(255, 255, 255);
}
these are the wrappers that sort of interacts the wrong way. You can visit www.old.vhammershoi.dk and scale down your browser to see that the box with the arrow in it (click and explore popdown) will move underneith the about me section
Thank you in advance
First off all, there is no need for custom height. You have set height to element with overflow: hidden, and because content is longer than element, button is pushed down. Remove height from all main elements, also, remove margin from intro container. In that way, button will be visible, and rendered page will be the same as without changes (except visible button)
Try one of these to fix your DIV (intro container) to the top of the screen.
position:fixed;
position:static;
position:absolute;
Here is a working example : http://jsfiddle.net/19Lhchyy/1/
Using postition:fixed;
http://www.w3schools.com/cssref/pr_class_position.asp
#ContentWrap {
min-height: 100%:
padding-bottom:30px;
}
#clickAndExploreText{
position: absolute;
}
I dont know if ure able to position it but if you dont, your container will grow on hover
Then your Text 'Click and Explore' will never be under the following container.
aditionally you are missing some white-space:nowrap in your mobile version to prevent linebreak for the headlines and the tet 'click and Explore'
Related
I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}
I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.
I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)