I'm pretty new to coding and need to pick some of your brains in order to fix this issue which is occurring on a holding page that I'm currently coding.
The company logo is positioned in the bottom corner and at certain screen size overlaps and interferes with the text (when you manually resize the browser window). I've used media queries so this doesn't happen on devises.
I'm not sure whats possible, but I always need the logo to be in the bottom right hand corner. But I'd like the logo to disappear from the screen when the logo starts interfere with the text , ideally I'd like the user to have to scroll down to see the logo at this point.
This the site in question http://embalmer-tiger-47168.bitballoon.com/
Heres My HTML
<img class="logo--master" src="assets/images/logomark.png" alt="Proud Robinson Logo">
</div>
Heres my CSS
.logos {
position: absolute;
bottom: 55px;
right: 55px;
}
.logo--master {
width: 7em;
}
Many thanks in advance :)
You would need your logo to have a relative position to your text. You can use position:relative. After that if it still doesn't respond like you would like it to, you can position it in a div that as the same width as the page (width:100%) and you can use de margin of your logo to center it (usually margin-left:auto; margin-right:auto; will work, but you might have to use %). Hope this will help you.
Absolutely positioning an element takes it out of the normal flow of the page, so that other elements don't know it's there and will overlap. If you apply a right and bottom margin to .container that matches the size of the logo, the content in .container won't overlap. The logo is about 7em tall/wide (per the width you gave it in css) and is 55px from the right/bottom, so a right/bottom margin of calc(7em + 55px) on .container should leave room for the logo.
div.container {
margin: 0 calc(7em + 55px) calc(7em + 55px) 0;
}
Related
I've started to create a new homepage and I realized that my old methods of creating said webpage were outdated. While learning about positioning divs in css I stumbled upon a problem I really find hard to crack.
On my webpage I want to have a picture div next to a text div, I want this text div to be a minimum of 500px, but I don't want it to stretch unless the screen is wide enough to show both the picture and the text(I got this working). The problem I get is when I want to make the screen smaller, I want the text div to decrease in width until it hits 500px, if the user then shrinks the screen more the text should then, and only then overlap the picture.
Here is an example of something similar.
http://jsfiddle.net/mnSGZ/1/
The problem is when shrinking it, I don't want the horizontal scroll to appear until the black square is covering the whole gray squares width.
I understand that 'margin-left: 200px;' prevents exactly this but is there some sort of max-margin to make this work?
code from jsfiddle:
#container {
background-color: gray;
margin: 20px;
min-width: 700px;
height: 300px;
}
#nav {
background-color: black;
margin-left: 200px;
height: 50px;
}
Use CSS3 Media Queries to style elements based on screen resolution. This link may help you:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
I couldn't think of the right wording for this question, but here is my problem:
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around.
For example, I have a navigation div floating on its own on the top left corner of the page.
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
This link from "A List Apart" covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queries because they allow you to apply styles based on certain characteristics of the browser or device.
How to keep code in center on zooming?
Center the code on zooming?
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}