I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
Related
TL;DR how can I get the images to fill the grid squares on this page.
I am working on a site I inherited that has been through three different web designers so it's a bit of a mess on the back end. It also uses timber/twig/acf which were new to me so I spent last week trying to figure out how everything is configured. I was trying to replicate this archive page so was playing around with the CSS but when I left work Friday everything was fine...this morning suddenly the images don't fill the grid squares. I don't know if something I did changed it and it was delayed bc of caching or if there was an update or what but I would love to change it back before anyone notices. I actually have the old version of the page still open where the images do fill grid squares and have spent all day looking through the code to see what changed but can't find any difference.
It's this css rule that preventing it from taking 100% width:
.rtr-6-grid:not(.knowledge-cta) .p-absolute.p-center div {
width: 470px;
}
Change this :
<div class="d-flex d-flex--y-center d-flex--x-center p-absolute p-center rtr-fill">
<div>
<img src="..." width="1779" height="1779">
</div>
</div>
To this :
<div class="p-absolute">
<div>
<img src="..." width="auto">
</div>
</div>
I'm using a countdowntimer on my website for shipping.
This my code I added in my header.tpl : http://jsfiddle.net/ALrnK/3/
<div id="leveransinfo">
<img src="http://mobilprylar.nu/img/frakt.png"/>
<img id="posten" src="http://mobilprylar.nu/img/s/17.jpg"/>
<div id="timeleft"></div></div>
<div id="levinfo">
<b>Leveransinformation</b></br>
</br>
ContentContentContentContentContentContentContentContent</br>
ContentContentContentContentContentContentContentContentContent</br>
</br>
ContentContentContentContentContentContentContentContentContentContentContent</br>
</br>
</div>
I'f you take look att (link was removed due to canceled project) and hover the countdowntimer it extends the header.
I would like the information to show there but on top of everything else. So its displays over the menu and the imageslider.
I tried to use z-index but it does not matter how I do. Is there anything else I should use instead?
Without seeing the actual styles, here's one possibility - Make sure the element that you are changing the z-index of is either position: relative;, absolute, or fixed.
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
I think my last question was misunderstood. I have pasted below, the HTML of the page I am having troubles with, but you can see it here: http://jsfiddle.net/wCZYU/6/
Basically I would like a fixed header (pageHeader) and a colored div that fills the browser window, NOT the entire page background. I then would like a div under this that the user will be required to scroll to see
<header class="pageHeader">
<div class="setWidth">
<div class="navMain">
Home
Work
Blog
Contact
</div>
</div>
</header>
<div class="secFill">i want to be below the navigation</div>
<div class="content">i want to be below secFill</div>
This is the image that I posted earlier that I want it to look like
http://i.stack.imgur.com/jZgMb.png
The navigation must be fixed and compatible in ie7/8.
Thanks alot (again)
If I'm understanding correctly, you just need to define .secFill as height:100%.
.secFill {
height:100%;
background-color:red;
}
http://jsfiddle.net/wCZYU/7/
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}