I have a website that was developed using iWeb where you can drag any object anywhere and make really nice websites. However it does not easily work well with websites that need a database. Because of this I am rewriting a website using Ruby on Rails 3.2.3, CSS3, Bootstrap 2.0, etc.
Here is the link to the website I am rewriting. http://www.iktusnetlive.com/Home.html
I am trying to replicate the portion where the blue camera with LIVE in yellow is in the header. I want to line up text to where the camera lens is. The graphic is 60X55. I have tried for a few hours playing with line-height, padding-top and other CSS options but I could not get the text to move down.
Here is my HTML code that includes the graphic and text I want to line up with the camera lens:
<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %> To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>
Here is my CSS code:
#camera-text {font-size: 15px; vertical-align: middle; color: #red;}
.align-center { text-align: center; }
#text-bold { font-weight: bold; }
I wonder if this is something that I will be able to do. As you can see I have a gradient as my page background. I do not know if this is possible using Bootstrap, CSS3 or HTML5. I would have created a table back in the day and use cell padding and other options that are no longer available in HTML5 apparently.
Any help would be appreciated.
You can generally center block level items in CSS like this:
.some-class {
display: block; /* needed if you'd like to center an inline element */
margin: 0 auto;
}
Setting the right and left margins to auto does the trick.
Try absolute positioning When you need to get really specific:
If you're building a basic website, Ruby on Rails and Twitter Bootstrap are overkill and will only complicate things. You might try WordPress as you get the hang of it.
Related
I am creating a new website via Squarespace platform. The template is Brine Family 7.0.
https://kazoo-bulldog-snp5.squarespace.com/
Password to access is: 1234
I am trying to change to some text display that I am not able to do with the out of the box feature of Squarespace, but I can access some code sections to do some custom.
On the cover/landing page, I have some text displayed on the top of the page, above the logo that is centered. I want to display it on the bottom of the page, just like that:
https://ibb.co/fN1V5th
Do you have any code suggestion for that?
Thanks a lot for your kind help!
Use this code with your content. (Assuming content is placed in h1 tag)
h1{
position: relative;
bottom: 20%;
}
And, this community is not for suggestions. If you find problems or errors in your project code, you can ask in this community. Hope it helps!!.. Happy Coding!!
I created a div in my a web site so that the text on the page is neatly contained to a set width. I've also implemented CKEditor5 and am using it's CodeSnippet plugin. When there is too much code on a line, it creates a scrollable box with the text overflowing in that scrollable part (behaviour that I actually desire!). However, the background does not exert that same behaviour so that it looks quite unreadable as you can see in the picture below.
I am quite new to building websites so I don't actually know where to start, Should look into the HTML or do I need to set some configuration in CKEdtior?
https://i.imgur.com/X5FXyGU.png
Cheers,
I found that the issue only arises when I apply a custom style like monokai-sublime.css.
adding
overflow-x: auto;
to
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
in monokai-sublime.css fixes the issue for me.
This is a relatively small project that I've been working on however it's driving me insane...
I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.
The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.
I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.
This is what my original website looks like:
http://i.stack.imgur.com/sxfeg.png
(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e
Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.
So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png
^ This is important in my problem.
When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)
However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.
#main_container{
width:977px;
background:url(center_bg_repeat.gif) repeat-y center;
The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png
Have I got the syntax wrong? Or what is wrong with my code?
I've placed all the images in the same folder as the CSS file for
convenience.
Is this a problem with Visual Studio 2013 or am I doing something
fundamentally wrong?
Is there perhaps another way to port this same design without
causing so many problems?
I'm not entirely clear on what you want to achieve but if it is the same layout as your original site, then it is better to replicate the html and css exactly first to get it working then look at restructuring or refactoring the code. For example, check that all element sizing is the same so that content displays as you expect.
There are a couple of key differences between your original and new code that could affect the behaviour in the new version of your site. In your original css you don't have a repeat style for center_bg_repeat.gif. Also, it looks like #main_container isn't referenced in your original code.
Repeating a background image won't cause content to repeat across the page. You are already including your content in your new html so you just need to use positioning (e.g. floats vs relative/absolute positioning) to get the tiles to layout in the way you want (see code snippet for an example).
html, body, .container
{
height: 100%;
min-height: 100%;
}
.tile {
float: left;
width: 20%;
height: 30%;
margin: 10px;
padding: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tile">first</div>
<div class="tile">third</div>
<div class="tile">second</div>
<div class="tile">fourth</div>
<div class="tile">last</div>
</div>
In your case, if you want #main_container to scale to fit the content then set its style to min-height: 100%;
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.