Two Simple HTML/CSS Questions [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 3 years ago.
Improve this question
Ok, so I have this site: http://example.com/
And I was wondering two things - A) how can I prevent the side bar from overlapping the text of the resume when the window is small and I scroll? I want the sidebar to scroll vertically, but not horizontally.
B) How can I add little buttons into different parts of the margin? I want to add little buttons to go to my blog, Twitter and such.

I think you will need javascript to do this properly.
try sticking this in your head section and change your css #sidebar to position:absolute;
<script type="text/javascript">
window.onscroll = moveEle;
function moveEle() {
//Alter top to be how many pixels you want from the top of the window
var top = 50;
ele = document.getElementById('sidebar');
if(document.body && document.body.scrollTop) {
ele.style.top = (document.body.scrollTop + top) + "px";
} else if(document.documentElement && document.documentElement.scrollTop) {
ele.style.top = (document.documentElement.scrollTop + top) + "px";
}
}
</script>
Oh, and the buttons, you could just put some anchor tags in the sidebar as well with href pointing to whatever addresses you have at twitter etc. Style them with display:block and then style further. You can make them the size you want with whatever background color and border or background image.

My method for the Buttons, would be not to create individual classes, but create a <div>.
#navigation{margin-top:-50px}
Now, all buttons and all things in that navigation will be -50px to the top.
But, it get's better!
#navigation .littledifference{margin-top:-35px !important}
Now, you can set the button (or again, anything) in that navigation to have this class, and the margin will be different! This saves on having extra coding for every single button.
Edit as Psyrus says above, you could also use <a> tags. This requires a fair amount of work from my own personal experience, though you can do anything with them. My system above should still work though - just make sure the <a> tags still are inside the #navigation and don't have conflicting margin attributes. The class selector should still work as well.

You should use % value.
#wrap{width:100%; max-width:1024px;}
#sidebar{width:15%;}
#main{width:80%; padding:10px 2.5%;}
This way, when you will resize your window, your content size will adjust in consequence. So they won't overlap.

To prevent overlapping You can use negative value and positive Values for specific padding and margin so that you can place any <div> at any place you want.One thing you have to keep in mind you can give negative values and negative percentage while setting padding and margin
.ClassName
{
padding-left:-20px;
padding-top:-10%;
}

Related

can't use css on .scroll-content because it breaks ion-infinite-scroll

The first image below shows the unwanted whitespace that is being created by an excessively large margin-top on .scroll-content. I countered this by putting margin-top: -47% on .scroll-content. However, doing this broke my ion-infinite-scroll on the page. It seems that any and all css that I put on .scroll-content breaks ion-infinite-scroll.
If you click on the images to look closer. You can see in the devtools Elements section that the margin-top is being created dynamically somewhere as it is added as an inline style. Does anyone know any tricks for how to either move the whole .scroll-content up or how to negate the margin-top? I don't really have any css to show for this...I am just trying to override an element's style that is created by ionic. Again, any css that I use on .scroll-content breaks ion-infinite-scroll so this needs to be done in a really hacky way (yay css).
Also, changing it dynamically with setElementStyle or something like setAttribute('style', 'margin-top: 132px') breaks .ion-infinite-scroll.
As a workaround I made my own bottom-of-the-screen-when-scrolling detector:
let element = this.elRef.nativeElement.querySelector('.scroll-content');
element.addEventListener('scroll', (event) =>
{
var element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
... loading new items code goes here ...

Add vertical margin to anchors

Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}

Html css layouts- Web Mobile suppoort

I have a page set out similar to this:
My question is about mobile support and how should I go about doing the following:
When the user resizes the window to about the size of a smartphone screen, I want to remove the main content, which is everything below the header area/login, and keep only the header, the login form and the footer. So I have been using css media queries to do this. My problem is that my login form markup resides within the header area.
<div id = "header">
<div id= "logo"><img src =""/> </div>
+-------form markup here------+
|<div id= "login-form">..... </div>|
+ ----------------------------+
</div>
<div id= "main-content">
This is where I want to put the login form
</div>
So my question is, How should I do this?
should I just create another css file and link/apply that when the screen width-height is detected to be smartphone size ?
Should I create the markup block inside main-content, and set its css style display to none UNTIL the screen is resized to smartphone size, where a media query is set to change display attribute ?
What is the best way to accomplish this? I greatly appreciate any help and at least, some little explanation to justify that answer. Also links and other references are very welcome !
Cheers..
Use Media Queries to hide and show content based on device or device width/height.
Here's a good Media Queries Cheat-sheet:
http://stephen.io/mediaqueries/
I wouldn't position the form as 'absolute' and put it outside the header as another poster suggested. This is super sloppy and bad practice. What's the 'absolute' form going to be positioned too? The body? Aghh. You'd need a wrapper - and that's just more code. You can do it all via CSS. Just use Media Queries to change the CSS styles for the header, show/hide elements, and reposition.
OR
JQUERY (Not the best route, but for what you want you're a limited without a redesign). I kept it simple for easy explanation. Note, I haven't tested this:
$(window).resize(function(){
var maxwidth = $(window).width(); // get device window width
var form = $('#login-form'); // form
if(maxwidth <= 320) { // 320 px or whatever you want
form.clone().appendTo('#main-content'); // clone form and append to main content
form.eq(0).hide(); // hide first form, the one in the header
}
else {
form.eq(0).show(); // show initial form
form.eq(1).remove(); // remove cloned form, if set
}
});
I can see two ways you could go about accomplishing your goal:
Take your login-form out of the header div, put it in the main-content div and absolutely position it to make it appear inside the header when on a desktop screen, then use a media query to move it to below the header for viewing on mobile devices.
Use your idea of having two login-forms: one in the header, and one in the main-content area. Use media queries to change the display attribute so that the correct login-form is showing at the right time depending on the screen size. I'm not sure if duplicating the login-form is good practice, so I would try option 1 to start.
Let me know if this works out!

CSS tabs wrap around right side of DIV with text transformation (rotatation)?

I would like to have tabs on the top of a page and if there is not enough room for those tabs, the tabs would then wrap around that DIV and would be text-transformed to rotate 90 degrees. My page is a CSS liquid design that is flexible based on window size. I would not like to use images since the tab text will be populated from a database. Below is a screenshot of would I would like to accomplish. I am also using PHP so, I could build some IF/THEN statements if needed. I would prefer to not use Javascript.
If window is open wide, display as:
If window is open narrow, display as:
I would like to use Listamatic (http://css.maxdesign.com.au/listamatic/horizontal05.htm) and somehow update it to allow for this new wrapping effect with text transformation. Is this possible?
Here is part of the CSS that might work:
.sidetabs {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Update: 12/13/2011: CSS - Force a child DIV to expand page width?
Minitech: Thank you for the insight and the Javascript example. In an effort, to solve my tab issue, I thought I might try another approach.
I am working on an editable navigation. The user can add many tabs across the top as they wish. In the event that there are many tabs that would force the set of tabs to be broken/wrapped to the next line, I would like to force it on 1 line even if this means that the page width would grow immensely.
Is there a way for a child DIV to expand a page width even if the content is in a wrapper? In my JS Fiddle link below, I have a simple wrapper page with a right sidenav. I am using Listamatic tabs (http://css.maxdesign.com.au/listamatic/horizontal05.htm) for the top. As you can see, the tabs are breaking into many rows of tabs and it doesn't look great. Can I use some CSS to force the DIV to not wrap onto a 2nd or 3rd line? I would like the DIV to be liquid based on the number of tabs (and length of the text in the tab text). Any ideas?
http://jsfiddle.net/zenfiddle/yUPCC/3/
Well, as far as I know, that's completely impossible using CSS, as well as using PHP, since it's a server-side scripting language. You'll need to use JavaScript in this instance, and of course make sure you degrade gracefully all the same.
A simple way might be to check for wrapping elements using offsetTop. Something like this (you'll have to adjust for positioning if you use that):
var navigation = document.getElementsByTagName('nav')[0].getElementsByTagName('a'); // Or however you want to do this
var i, element;
for(i = 0; element = navigation[i]; i++) {
if(element.offsetTop > 0) {
// It's a wrapping element
element.className = element.className ? element.className + ' side-tab' : 'side-tab';
}
}
Then, you can style nav a (for example) and nav a.side-tab however you need.

HTML5 & CSS3 Using multiple Pseudo classes and translateX/Y properties

So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.